HighCharts: display the y-axis labels in percentage instead of the absolute count for basic column charts

Question

I just started using highcharts and I am trying to figure out a way to display the y-axis label in % instead of the actual values/counts for a Basic Column chart. Is there a way I can do that?Can someone please suggest me something.

Thanks

Answer 1

If all you want to change is the axis labels, check my answer and fiddle example here:

Highcharts percentage of total for simple bar chart

If you want the tooltip to also show the % value, you can copy the code from the dataLabels formatter in that example to accomplish that.

Answer 2

Unfortuantely this option is not available, but you can prepare your own function which will count all points and calculate percetn value. Then returns updated values for data series.

Answer 3

You can change the count to a distribution percentage by taking the sum of each step division and dividing by count.

Here is the Highcharts example histogram() function modified to show percentage, make sure to set yAxis to max 1. If you do not want decimal percentage multiply by 100.

function histogram(data, step) {
    var histo = {},
        x,
        i,
        sum = 0,
        arr = [];

    // Group down
    for (i = 0; i < data.length; i++) {
        x = Math.floor(data[i][0] / step) * step;
        if (!histo[x]) {
        histo[x] = 0;
       }
        histo[x]++;
    }

    // Make the histo group into an array
    for (x in histo) {
        if (histo.hasOwnProperty((x))) {
            arr.push([parseFloat(x), histo[x]]);
        }
    }

    // find sum 
    for (i = 0; i < arr.length; i++) {
            sum += arr[i][1];
       }

    // calculate percent 
    for (i = 0; i < arr.length; i++) {
            arr[i][1] = arr[i][1]/sum ;
        }

    // sort the array
    arr.sort(function (a, b) {
        return a[0] - b[0];
    });

    return arr;
}

fiddle: http://jsfiddle.net/jamie_farrell/xy7uogz4/2/