Using percent values in series

In our everyday charting we mainly use absolute values. However, sometimes we might need to show how specific value relates to other elements. In this case relative percent value is much more representative than absolute one. This tutorial will explain ways we can use such relative values.

Intro

Let’s start with a fairly simple stacked column chart:

Open in CodePen

Right now, it operates using absolute values:

• Value labels over columns.
• Rollover tooltips.
• Legend values: both when chart is static and when hovered over specific category.

Let’s see how we can use percent values instead.

Enabling percent calculation

Percent calculation is a costly operation in terms of CPU resources. Since in most cases it is not needed, it is disabled by default.

We’ll need to enable it for each series individually. For that we have calculatePercent - a property of Series.

Simply set it to true.

TypeScript

series.calculatePercent = true;

JavaScript

series.calculatePercent = true;

JSON

{
  // …
  "series": [{
    // …
    "calculatePercent": true
  }, {
    // …
    "calculatePercent": true
  }, {
    // …
    "calculatePercent": true
  }]
}

Now that we’ve enabled percent calculation, let’s see what we can do with it.

Data placeholders

As you probably are aware, we are using “data placeholders” (references in curly brackets) to insert dynamic data values in labels.

When we are referring to absolute values, we can just reference directly to a “data field” by its name, e.g.: {valueY}.

To show its percent representation, we need to use calculated value, which is referenced like this: {valueY.percent}.

More info

For more info on how this works, make sure to check out our “Data placeholders” guide.

Data labels

Data labels on columns are implemented by utilizing “label bullets”.

To make them show percent instead of absolute value, we will need to update text value of their label accordingly:

TypeScript

labelBullet.label.text = "{valueY.percent}%";

JavaScript

labelBullet.label.text = "{valueY.percent}%";

JSON

{  // ...  "series": [{    // ...    "bullets": [{      // ...      "label": {        // ...        "text": "{valueY.percent}%"      }    }]  }, {    // ...  }, {    // ...  }]}

Tooltips

It works for tooltips identically:

TypeScript

series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: [bold]{valueY.percent}%[/] ({valueY}M)";

JavaScript

series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: [bold]{valueY.percent}%[/] ({valueY}M)";

JSON

{  // ...  "series": [{    // ...    "columns": {      // ...      "tooltipText": "[bold]{name}[/]\n[font-size:14px]{categoryX}: [bold]{valueY.percent}% ({valueY}M)"    }  }, {    // ...  }, {    // ...  }]}

Legend

Same placeholder syntax can be used for legend as well:

TypeScript

series.legendSettings.itemValueText = "{valueY.percent}%";

JavaScript

series.legendSettings.itemValueText = "{valueY.percent}%";

JSON

{  // ...  "series": [{    // ...    "legendSettings": {      "itemValueText": "{valueY.percent}%"    }  }, {    // ...  }, {    // ...  }]}

Complete example

Open in CodePen