Adding Percentage Of Total For Column And Bar Charts

[intapiuser]

The column and bar charts allow you to add value labels to the bars. In the widget's design panel, you can turn on "Value Labels" to display the values on the chart itself. The picture below shows a typical example of a column chart, in this example the chart shows the total number of answered calls by answer wait time (i.e., how many calls were answered within 0-8 seconds, 8-30 seconds, etc.).

But, the values themselves are redundant information. They can also be seen in the tooltips when you hover on a column; and they can be easily estimated from the height of the column itself against the values in axis. Having them displayed also as labels is redundant. In the example above the leftmost column show 311 calls answered within 0-8 seconds, but even without the label one can easily see that the column has a little more than 300 calls, from the column height.

It is much more useful to use the value labels to display additional information, such as percentage of total. This adds functionality to the chart by presenting the viewers with additional information in the same visualization, in a neat and tidy manner. It may also save you the need of cramming your dashboard with an additional chart to show the same data, this time as percentages. Like so:

To turn the value labels into percentage of total, we can add the following javascript code inside the widget's script. Make sure you enable "value labels" in the widget's design panel!

Code for bar/column chart with one category, and no break-bys:

//Change value labels on column chart to display percentage instead of values.
widget.on("beforeviewloaded", function (w, args) {

 //Change the datalabels into percentages using the formatter function.
 //This defines the formatter function for datalabels. The formatter function runs for every series value and for all categories, so it will change the labels for all values if there is more than one category or more than one value-series:
 args.options.plotOptions.series.dataLabels.formatter = function () {

   //Get the number of items in the series. This is the number of columns in the column chart.
   var NumberOfColumns = this.series.data.length;
 
   //calculate the total of values for all columns (all categories) in the series:
   var yValuesTotal=0;
   for (var i = 0; i < NumberOfColumns; i++) {
     yValuesTotal = yValuesTotal + this.series.data[i].y;
   };
   //return the format for the datalabel:
   return Math.round((this.y / yValuesTotal) * 100)+"%";
 };
});

The above code might need some modification if you have more than one value series.

Code for STACKED bar/column chart with one category, and no break-bys:

//shows percentage in labels instead of the actual values.
widget.on("beforeviewloaded", function (w, args) {
args.options.plotOptions.series.dataLabels.formatter = function () {
 return this.y = Math.round((this.y / this.total) * 100)+"%";
 }
})

Before:

After:

[OleksandrB]

To do the same but for a stacked total value

, please use the next code

widget.on("beforeviewloaded", function (w, args) {
args.options.yAxis[0].stackLabels.formatter = function() {
return applyFormatting(this.total);
};
});

function applyFormatting(value) {
return `${value}X`;
}