Format Highcharts y-axis labels

Dónal picture Dónal · Sep 30, 2014 · Viewed 27.8k times · Source

I'm using Highcharts to generate a line chart that shows currency values. By default the y-axis labels use metric prefixes for abbreviation, e.g. 3k is displayed instead of 3000

I would like to prepend a currency symbol to these labels, e.g. display $3k instead of 3k. However as soon as I add the currency symbol, the metric prefixes are no longer used. I've tried the following

    yAxis: {
        labels: {                
            formatter: function () {
                return '$' + this.value;
            }
        }
    }

and also tried

    yAxis: {
        labels: {
            format: '${value}'
        }
    }

But in both cases $3000 is displayed instead of $3k. Is it possible to add a currency symbol without losing the metric prefix?

Here's a demo (JSFiddle here) that illustrates the problem

Answer

Barbara Laird picture Barbara Laird · Sep 30, 2014

You can call the original formatter from your formatter function:

$(function () {
    $('#container').highcharts({

        yAxis: {            
            labels: {
                formatter: function () {
                    return '$' + this.axis.defaultLabelFormatter.call(this);
                }            
            }
        },

        series: [{
            data: [15000, 20000, 30000]
        }]

    });
});

http://jsfiddle.net/x6b0onkp/2/