Highcharts percentage of total for simple bar chart

Question

I have a simple 1-series bar chart where each bar has a nominal value. I can plot this fine with the data labels and axis representing the value for each bar but I'd like to have the data label and axis show the percentage of the total of the series while the nominal value is shown in a tooltip on hover (thus I don't want to convert the data to percentages prior to plotting).

Here is an image showing what I'm after and where I am now:

fiddle

Here's what I currently have for axis labels as the formatter function:

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

Is there some formatter function variable I can use to achieve this? I know it is easily done on a pie chart but I feel bar charts represent data much better.

EDIT: To put it simply, how do I get the sum of all the series' points? Once I have this it is straightforward to get the percentage:

return Highcharts.numberFormat(100 * this.y / this.y.total,0) + "%";

where this.y.total is the sum of the series.

Answer 1

You'll have to loop through the data and get the total, and then use the datalabel formatter function to get the percent.

Example here:

http://jsfiddle.net/JVNjs/319/

formatter:function() {
  var pcnt = (this.y / dataSum) * 100;
  return Highcharts.numberFormat(pcnt) + '%';
}

edit::

updated example with axis labels:

http://jsfiddle.net/JVNjs/320/

[[EDIT for comments

If you are trying to plot the percent values of multiple series, there are a variety of fundamental problems that arise.

If you are calculating the % of two different data series, and displaying the % value even though you've plotted the raw value, your chart will be misleading and confusing in most cases.

Plotting the data as the percent values directly is the best way to go in that case, and you can add the raw data value as an extra property in the point object if you want to display it in a tool tip or elsewhere ( ie http://jsfiddle.net/JVNjs/735/ )

If you insist on using the original method on two different series, then you can just create two different variables to calculate against, and check the series name in the formatter to determine which data sum to calculate against.

Answer 2

Highchart library is very enrich with build in functions. if you would like to just for the number on chart up to certain number. you can give a try for below function.

import {numberFormat} from 'hicghart';

then you can achieve the below way formating

numberFormat(this.y,decimalPlaceToFormat)

Answer 3

try this.percentage

It's pretty well documented in the highcharts API as well.

http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter

EDIT

Since you'd need it for non-stacked series, you'd need to get the total before generating the graph... The function below adds up your values into one variable which you can use in your formatter function later.

function arrayTotal(arr)
{
  var total = 0;
  for (var i = 0, value; value = arr[i]; i++)
  {
    total += value;
  }
  return total;
}

Answer 4

@jlbriggs had a great answer and lead me onto the path of creating this formatter function. This function always checks the current values in the data. If the data is updated programmatically at a later time, the percentages will reflect the newly updated data. No dataSum or loop is necessary as the .map().reduce() takes care of that for you.

dataLabels: {
  enabled: true,
  formatter: function() {
    var pcnt = (this.y / this.series.data.map(p => p.y).reduce((a, b) => a + b, 0)) * 100;
    return Highcharts.numberFormat(pcnt) + '%';
  }
}