When setting Chart.js to use the en-US locale, the scale numbers are formatted optimally. https://i.sstatic.net/fzjpQmM6.png
If I try using a tick callback as shown in the documentation:
ticks: {
callback: function(value) {
return value.toString();
}
}
I notice that the width for the numbers is not optimal.
https://i.sstatic.net/85zozkTK.png
The documentation mentions combining Chart.js format with custom formatting:
Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);
However, this approach does not work for TypeScript and results in an error message stating "Property 'Ticks' does not exist on type 'typeof Chart'."
Another method I attempted is:
Chart.registry.scales.get('ticks')?.formatters.numeric.apply(this, [value, index, ticks])
In this case, ticks seem to exist, but accessing formatters poses a challenge. The exportable functions from helpers only include formatNumber, which requires a locale and might skip the number width optimization by Chart.js.
The underlying issue here is that my client specifically requests decimal point formatting without any thousand separators. Manual solutions like trimming decimals may not be feasible due to the dynamic nature of the scale and zoom capabilities.
Chart.js version: 4.4.2 TypeScript version: 4.9.4