Using tick callbacks can add extra digits to tick labels

[doug-a-brunner]

Expected Behavior

Null Y axis tick callback ((value) => value) or simple callback (`(value) => value + 'psi') should not affect value precision.

Current Behavior

For some values of data and suggested axis limits, the Y axis ticks are rendered with extraneous digits (e.g. "78.95000000000002" instead of "78.95") if a callback is present, even if that callback does not change the value it's passed.

Possible Solution

Might need to add an argument to the callback API that gives the proposed/default string rendering of the number value.

Steps to Reproduce

Set suggestedMin, suggestedMax, and data as shown in example. Set a null callback for the Y axis ticks, and note extra digits in Y axis tick labels. Remove callback, and note change in tick labels.

Context

Our project plots values in engineering units (psi, kPa, V, °C, etc.) logged from our controllers. We use a tick callback to add those units to the Y axis tick labels.

We do not know the range of the data in an individual log in advance, so in order to maximize the dynamic range of the plot, we compute suggestedMin and suggestedMax from the data. In addition, the data may be converted to localized units (e.g. showing °F for US users), which introduces small errors due to FP precision limitations.

Environment

• Chart.js version: 3.5.1, 3.6.2
• Browser name and version: Chrome 96.0.4664.93
• Link to your project: https://charts.hgmelectronics.com

[kurkle]

The number formatting is done in the callback. If you replace the callback, its up to you to make it produce nice ticks.

You can call the default formatter from the callback:
https://codepen.io/kurkle/pen/bGoqYEK

[doug-a-brunner]

Thanks for the clarification, didn't know that was possible. Looking at the current docs, it would be helpful to add some clarification. How would you feel about adding the following?

Keep in mind that overriding ticks.callback means that you are responsible for all formatting of the label. Depending on your use case, you may want to call the default formatter and then modify its output. In the example above, that would look like:

                       // call the default formatter, forwarding `this`
                       return '$' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);

[kurkle]

That could be a good addition to the documentation.

Further, you can also use the ticks.format to pass options to the default formatter: https://codepen.io/kurkle/pen/gOGmXzK

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#linear-axis-specific-tick-options

[doug-a-brunner]

Cool, I'll submit a PR.

[LeeLenaleee]

Fixed with #9994

[digiage]

That could be a good addition to the documentation.

Further, you can also use the ticks.format to pass options to the default formatter: https://codepen.io/kurkle/pen/gOGmXzK

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#linear-axis-specific-tick-options

I am trying to change decimal separator (it is not dependent on language, but on app settings). I have tried the suggested format, but I am not sure how can I add there lang option (from Intl.NumberFormat) to simulate different decimal separator (for example 'cs' and 'en'). This is obviously wrong:

format: ('en',{style: 'decimal'})

https://codepen.io/koubin/pen/bGLbreg