Skip to content Skip to sidebar Skip to footer

Format Highcharts Y-axis Labels

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

Solution 1:

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/

Solution 2:

I looked in HighCharts source code and found out that if you pass a format or formatter it won't add numeric symbol. It is inside else if statement i.e. formatOption xor numericSymbol. So you need to add a formatter and do the logic yourself.

this is a slightly modified copy-paste of their code:

       formatter: function() {
           var ret,
               numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'],
               i = numericSymbols.length;
           if(this.value >=1000) {
               while (i-- && ret === undefined) {
                   multi = Math.pow(1000, i + 1);
                   if (this.value >= multi && numericSymbols[i] !== null) {
                      ret = (this.value / multi) + numericSymbols[i];
                   }
               }
           }
           return'$' + (ret ? ret : this.value);
       }

http://jsfiddle.net/x6b0onkp/1/

Post a Comment for "Format Highcharts Y-axis Labels"