How to Format Highcharts dataLabels Decimal Points

Question

Can you please take a look at this example and let me know how I can format the dataLabels to be display only with two decimal numbers?

Here is the numver formats which I have in the series

 series: [{
                name: 'Tokyo',
                data: [7.554555, 6.34345559, 9.5555, 14.5555, 18.4333433, 21.5555, 25.2, 26.5333333, 23.33333, 18.23243543, 13.776565669, 9.65454656]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]

and I would like to present them like 7.55 , 6.34, 9.55 . Thanks

Answer 1

I noticed in the comments you wanted to not display trailing zeroes.

This was the simplest solution I was able to muster:

...
dataLabels: {
    enabled: true,
    formatter: function () {
        return parseFloat(this.y.toFixed(2)).toLocaleString();
    }
}
...

If you don't want the number to end up with a comma-separator (depending on locale) remove the .toLocaleString().

Sidenote: Unfortunately using format (instead of formatter and a js func like we do above) is limited to a subset of float formatting conventions from the C library function sprintf, as indicated here on highcharts website. That library has the code g that would automatically do this for us but unfortunately it is not implemented in Highcharts :(, i.e. format: '{point.y:,.2g}' does not work.

Answer 2

I would simply add a the format option to data labels as follows:

dataLabels: {
    enabled: true,
    format: '{point.y:,.2f}'
}

It's the simple way of doing it without having to define a function using formatter.

extra:

The comma after the colon makes sure that a number like 1450.33333 displays as 1,450.33 which is nice also.

Answer 3

In case someone wants to go "further", I'm showing data that can be 10^1 to 10^9 so I'm converting them and showing the unit afterwards.

Remember, Highcarts deals only with integers so if you want to add units (and not in the YAxis because of multiple units) you can give it in the source data but you have to format them afterwards:

column: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    // Display only values greater than 0.
                    // In other words, the 0 will never be displayed.
                    if (this.y > 0) {
                        if (this.y >= Math.pow(10, 9))
                        {
                            return Highcharts.numberFormat(this.y /Math.pow(10, 9) , 1) + " mias";
                        }
                        else if (this.y >= Math.pow(10, 6))
                        {
                            return Highcharts.numberFormat(this.y /Math.pow(10, 6) , 1) + " mios";
                        }
                        else
                        {
                            return Highcharts.numberFormat(this.y, 0);
                        }
                    }
                },

mias : stands for "milliards" (french translation of billiards) mios : stands for "millions" (french translation of millions)

Answer 4

You need to combine the dataLabels formatter and Highcharts.numberFormat:

...
dataLabels: {
    enabled: true,
    formatter: function () {
        return Highcharts.numberFormat(this.y,2);
    }
}
...

See jsFiddle