search

vaadin / flow-components

Java counterpart of Vaadin Web Components
100 stars 66 forks source link

Axis label formatter might fail because wrong this reference, update documentation #1484

Open tmattsso opened 4 years ago

tmattsso commented 4 years ago 
                labels.setFormatter("() => {this.value +'°';}");
                labels.setFormat("{value} °");

The first row prints 'undefined°' while the second one works.

tmattsso commented 4 years ago

Addendum, using a full function works: labels.setFormatter("function(){ return this.value + '°'; }");

Apparently arrow functions in JS do not bind 'this'. So the feature does work, but should get some documentation?

Haprog commented 4 years ago

the function is as Highcharts say it should work (using this.value)

Can you link where this is said? Just to see how exactly is it documented.

Haprog commented 4 years ago

I guess you meant this https://api.highcharts.com/highcharts/legend.labelFormatter

I guess it would be helpful to improve the docs. Maybe add an example or two for setFormatter() https://github.com/vaadin/vaadin-charts-flow/blob/master/addon/src/main/java/com/vaadin/flow/component/charts/model/Labels.java#L164

alvarezguille commented 4 years ago

We could also mention to avoid arrow functions in formatter docs https://vaadin.com/docs/v14/charts/java-api/charts-configuration.html#charts.configuration.format.formatter