javascript - 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.