Commas in CHARTJS

[dannice]

I have been trying to figure this out for 2 years now without a proper solution.

The problem is that where I live we write commas (,) instead of (.) with numbers like two-hundred twenty three comma(,) fifty six. So instead of the standard US 223.56 we would write it 223,56.

And if we got a long number we do it like One million(.) Three hundred forty five thousand(.) two hundred fifty seven comma(,) seventy five. So instead of the standard US 1,345,257.75 we would write it 1.354.257,75

Is there any way of doing this SIMPLY? (I am from Iceland for interest).

best,
D

[etimberg]

In v3, this is relatively easier since there is a locale setting and then numbers are formatted with Intl.NumberFormat

Sample: https://jsfiddle.net/qaLc78zf/

In v2, you'll need to replace the tooltip & axis callbacks that generate the strings.
Tooltip: label callback https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
Axis: Tick callback https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

[dannice]

Thanks for that.
This callback solution has been hard for me to crack and no examples that replicate the exact problem.

When will v3 be out? Cause I would like to migrate over as soon as possible.

[LeeLenaleee]

As of 19 days ago there has not been a specific release date. From the reaction of @etimberg (maintainor) #6598 (comment) at least the PR to make all options scriptable has to be merged, which isn't finished yet.

Code:

 options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return value.replaceAll('.', ',');
                    }
                }
            }]
        }
    }

Example source: https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

[etimberg]

There's no specific date, but it's close. The issues are tracked in https://github.com/chartjs/Chart.js/milestone/16

We want to get those 3 breaking changes in as this is the last opportunity to make those kind of changes for a while

[etimberg]

For a solution that uses the callback and Intl.NumberFormat

const formatter = new Intl.NumberFormat('en-US'); // supply correct BCP47 code here which I think for Icelandic is 'is-IS'

const options = {
        scales: {
            yAxes: [{
                ticks: {
                    callback: function(value, index, values) {
                        return formatter.format(value);
                    }
                }
            }]
        }
    }