I am using dual-axis highcharts. In the y-axis the values are too big to read. I wold like to convert them to shortcuts like 1K for 1000 and 1.0L for 100000 and 1.0M for 1000000 and 35.8M for 35869982 and 3.5M for 3550977.

This is my FIDDLE

 $(function () {
$('#container').highcharts({
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Average Monthly Temperature and Rainfall in Tokyo'
    },
    subtitle: {
        text: 'Source: WorldClimate'
    },
    xAxis: [{
        categories: ['MAR-2014', 'APR-2014', 'MAY-2014', 'JUN-2014',
            'JUL-2014', 'AUG-2014', 'SEP-2014', 'OCT-2014', 'NOV-2014', 'DEC-2014'],
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'VOLUME',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: 'REVENUE',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 100,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{
        name: 'Revenue',
        type: 'column',
        yAxis: 1,
        data: [35869982, 26090976, 26595718, 33914250, 25999278, 36579864, 35843674, 28008920, 27718356, 29014230],
        tooltip: {
            valueSuffix: ' '
        }

    }, {
        name: 'volume',
        type: 'spline',
        data: [3379865, 2373769, 2401815, 3222316, 2459713, 5864469, 5139453, 3341922, 3229963, 3550977],
        tooltip: {
            valueSuffix: ''
        }
      }]
    });
   });

Here I have rounded up where I want to make changes in the below figure

I am using dual-axis highcharts. In the y-axis the values are too big to read. I wold like to convert them to shortcuts like 1K for 1000 and 1.0L for 100000 and 1.0M for 1000000 and 35.8M for 35869982 and 3.5M for 3550977.

This is my FIDDLE

 $(function () {
$('#container').highcharts({
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Average Monthly Temperature and Rainfall in Tokyo'
    },
    subtitle: {
        text: 'Source: WorldClimate.'
    },
    xAxis: [{
        categories: ['MAR-2014', 'APR-2014', 'MAY-2014', 'JUN-2014',
            'JUL-2014', 'AUG-2014', 'SEP-2014', 'OCT-2014', 'NOV-2014', 'DEC-2014'],
        crosshair: true
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'VOLUME',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: 'REVENUE',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 100,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{
        name: 'Revenue',
        type: 'column',
        yAxis: 1,
        data: [35869982, 26090976, 26595718, 33914250, 25999278, 36579864, 35843674, 28008920, 27718356, 29014230],
        tooltip: {
            valueSuffix: ' '
        }

    }, {
        name: 'volume',
        type: 'spline',
        data: [3379865, 2373769, 2401815, 3222316, 2459713, 5864469, 5139453, 3341922, 3229963, 3550977],
        tooltip: {
            valueSuffix: ''
        }
      }]
    });
   });

Here I have rounded up where I want to make changes in the below figure

• javascript
• jquery
• highcharts
• datatables

2 Answers 2

You need to make a use of formatter:

formatter: function(){
              return this.value/1000000 + "M";
            }

Fiddle

To utilize the built in "shortening" functionality you can just remove your yAxis.label.format. You have currently set it to {value}, which is the default, but manually setting it seems to prevent the metric prefixes from being applied.

Look at this JSFiddle example, where all I've changed is removing the following line from both of your y-axis labels:

format: '{value}'

With this automatic shortening the following metric prefixes may be applied:

[ "k" , "M" , "G" , "T" , "P" , "E"]

You can set your own values with the lang.numericSymbols option (API).