"Visualizing data with Highcharts: Utilizing percentages in a basic bar chart

Question

"Visualizing data with Highcharts: Utilizing percentages in a basic bar chart

I am working on a basic 1-series bar chart with nominal values for each bar. While I am able to plot it with data labels and axis showing the value of each bar, my goal is to display the percentage of the total series on these labels while keeping the nominal value in a tooltip upon hover (so I prefer not to convert the data to percentages before plotting).

Here's an illustration of what I want to achieve along with my current progress:

fiddle

This is how I currently set up the axis labels using the formatter function:

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

Is there a specific formatter variable that can help me accomplish this? I know pie charts allow for this easily, but I believe bar charts convey data more effectively.

EDIT: In simple terms, how can I calculate the sum of all points in the series? Once I have this, calculating the percentage becomes straightforward:

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

where this.y.total represents the series total sum.

javascript charts highcharts nominal-data

Answer 1

Answer №1

To determine the total, you must iterate through the dataset and obtain the sum. Afterward, utilize the datalabel formatter function to retrieve the percentage.

See an illustration below:

http://jsfiddle.net/ABC123/987/

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

update::

revised example showcasing axis labels:

http://jsfiddle.net/ABC123/988/

[[UPDATE regarding comments]]

When plotting percentage values for multiple series, several fundamental challenges may arise.

If you are computing the % of two distinct data series and exhibiting the % value despite plotting the raw value, your chart may lead to confusion and misinterpretation in most instances.

Directly depicting the data as percentage values is typically recommended in such scenarios, and if desired, you can incorporate the raw data value as an additional attribute in the point object for display purposes (e.g., http://jsfiddle.net/ABC123/989/)

If you are determined to employ the original method on two different series, you can create separate variables for calculation purposes and assess the series name within the formatter to ascertain which data sum to compute against.

Answer 2

To determine the total, you must iterate through the dataset and obtain the sum. Afterward, utilize the datalabel formatter function to retrieve the percentage.

See an illustration below:

http://jsfiddle.net/ABC123/987/

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

update::

revised example showcasing axis labels:

http://jsfiddle.net/ABC123/988/

[[UPDATE regarding comments]]

When plotting percentage values for multiple series, several fundamental challenges may arise.

If you are computing the % of two distinct data series and exhibiting the % value despite plotting the raw value, your chart may lead to confusion and misinterpretation in most instances.

Directly depicting the data as percentage values is typically recommended in such scenarios, and if desired, you can incorporate the raw data value as an additional attribute in the point object for display purposes (e.g., http://jsfiddle.net/ABC123/989/)

If you are determined to employ the original method on two different series, you can create separate variables for calculation purposes and assess the series name within the formatter to ascertain which data sum to compute against.

Answer 3

Answer №2

After receiving insightful advice from @jlbriggs, I was inspired to develop a formatter function that dynamically updates data values. This function constantly tracks the current data, ensuring that any programmatically induced changes are promptly reflected in the percentages displayed. With the clever utilization of .map().reduce(), there is no need for cumbersome loops or manual calculations.

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) + '%';
  }
}

Answer 4

After receiving insightful advice from @jlbriggs, I was inspired to develop a formatter function that dynamically updates data values. This function constantly tracks the current data, ensuring that any programmatically induced changes are promptly reflected in the percentages displayed. With the clever utilization of .map().reduce(), there is no need for cumbersome loops or manual calculations.

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) + '%';
  }
}

Answer 5

Answer №3

Give this a shot: percentageCalculation()

The method is well-detailed in the official highcharts documentation.

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

UPDATE

If you're working with non-stacked series, make sure to calculate the total values before plotting the graph... The following function will sum up all your values into one variable for use in your formatter function later on.

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

Answer 6

Give this a shot: percentageCalculation()

The method is well-detailed in the official highcharts documentation.

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

UPDATE

If you're working with non-stacked series, make sure to calculate the total values before plotting the graph... The following function will sum up all your values into one variable for use in your formatter function later on.

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

Answer 7

Answer №4

The Highchart library offers a wide range of built-in functions that make chart customization easy. If you want to display numbers on the chart up to a certain decimal place, you can use the following function:

import {numberFormat} from 'highchart';

You can then format the number like this:

numberFormat(this.y, decimalPlaceToFormat)

Answer 8

The Highchart library offers a wide range of built-in functions that make chart customization easy. If you want to display numbers on the chart up to a certain decimal place, you can use the following function:

import {numberFormat} from 'highchart';

You can then format the number like this:

numberFormat(this.y, decimalPlaceToFormat)

"Visualizing data with Highcharts: Utilizing percentages in a basic bar chart

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

implementing conditional logic in angularjs expressions

Access the Windows directory through a custom HTML link

Concurrent programming in Node.js with the async module

Setting a completion flag using a factory in AngularJS

Best practices for defining module-wide constants in AngularJS

Utilize unshift() method in JavaScript to insert form input into an array

Utilizing Node.js with Express and Swig to seamlessly pass a local JSON file to a template

The perplexing results received when using the npm outdated command

AJAX using PHP returns an object containing null values

I'm looking to retrieve the selected value from my autocomplete box in React using the Material UI library. How can I

"Enhancing User Experience with Hover States in Nested React Menus

Error: Firebase Cloud Functions reference issue with FCM

How to retrieve JSON data from unidentified objects using JQuery

What separates name="" from :name=""?

A Guide to Setting the HTML Lang Attribute on a Specific Page in Next.js

I am looking to fetch information from a different Firestore collection by looping through data using a forEach method within an onSnapshot function

Unable to retrieve props from server-side page to client-side component in a Next.js application router

What is the best way to reference a const from a different class in React?

Retrieving and submitting text in a NodeJS environment

Enhancing Tables with Angular for Dynamic Translation and Filtering