Using tick callbacks can add extra digits to tick labels

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]

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

[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