ChartJs localizes numbers by default

[elinake]

Expected behavior

I use ChartJS with Angular (12.2.17). Angular by default uses localization en_US for number formatting. ChartJS has not documented what is the default locale, so I assumed it has a forced default locale as well.

Current behavior

Most of the countries use comma as thousand separator, and dot as decimal character. German way of formatting numbers is the dot as the thousand separator, and comma as decimal character. ChartJS uses the browsers language and/or location as the default number formatting. That results having the same data in two different formats, when I need both chart and a list implemented in Angular. Depending on the dataset, it might not be clear that two different formats are in use, and for example 1,111 could mean either decimals or thousands.

It is possible to set the locale in Angular based on users language, but the problem is that each of the locales has to be registered in build-time with registerLocaleData, otherwise all Angular number pipes will fail. It is not efficient to register every single language in the world, it will increase the build size. Even if I register a subset of languages that users will most likely use and set a fallback, ChartJS would still by default use the location based formatting for the languages outside of the list.

Reproducible sample

https://angular-chart-js-6yfyzw.stackblitz.io

Optional extra steps/info to reproduce

Change your browser language to German -> Angular table is not converted to German numbers, in the chart numbers are converted. Browser language English -> same format in both.

Possible solution

I think at minimum you should document that ChartJS numbers are localized by default, so that users know they have to manually write the locale for the charts. It is still a very unexpected consequence, no one who doesn't provide automatic location-based translations, would think of testing the app with different languages. That's why not localizing numbers by default would be much clearer use case.

Context

No response

chart.js version

4.0.1

Browser name and version

No response

Link to your project

No response

[kurkle]

Add locale: 'en', to the options?

Documentation can be found here: https://www.chartjs.org/docs/latest/configuration/locale.html

Edit: chart.js use the platform (browser in this case) default, so IMO the Angular behavior is unexpected.

[elinake]

@kurkle Yes, that hardcodes the english language, which doesn't remove the unexpected default behavior issue. I think a functionality that changes by default depending on user, is more unexpected. Especially as ChartJs is a library being used by other libraries, and not for example a website. Also what about mixing languages and localization practices? Wouldn't it be weird if someone in Bangladesh was seeing Bengali numbers on English page?

[LeeLenaleee]

I agree with kurkle it would be more user friendly to show the numbers in a format they are used too, by using the current locale of the browser itself.

For your case if someone from another country is visiting your application it would be better to just serve them in their native language, you could load these translation files dynamicly when they are needed.

Chart.js is verry flexible, this problem can be solved by setting a locale yourself and updating that or use custom tick and tooltip callbacks to show everything how you want it.

[kurkle]

Its configurable. Types seem to be a bit off though.

In docs

(linked master docs, because latest does not currently seem to work for me)

[elinake]

Honestly it's not a good idea :D

[kurkle]

Honestly it's not a good idea :D

What is not a good idea? Angular using a default locale in the first place, or applying that same configuration to any libs used that are not based on Angular?