Klipfolio. The KPI Dashboard - Evolved
The KPI Dashboard – Evolved
Contact Us
TRY IT Web & Mobile
Sign In

Displaying data as a stacked bar chart


You want to display stacked bar charts to represent numbers.


In this article, you will find the following sections:

Example Klip

Download the sample Klip for examples discussed below.

Important Notes

  • Stacked bar charts are supported in Klipfolio Dashboard version 5.4 and later.
  • Depending on the version of Klipfolio Dashboard you are running, the data source from which the chart is generated can be in one of the 2 formats. See the Expected data format article for details.


  • Use type: graph and format: "stackedbar" to generate a horizontal stacked bar chart for each item.
  • The default view is a comparison of all data points in the chart, and the width of all the charts in the column reflects the biggest chart in it. Each data point is charted relative to this value. (See example 1)
  • Use format: "range(0,x)" to specify the range to be used by all the charts in the column. (See example 2)
  • Instead of the range, use "full" to use the sum of all values in each item as the 100% value for its chart. (See example 3)
  • In version 5.4, the background is displayed by default. Add the format value "nowell" to remove it. (See example 4)
  • In version 5.5 and above, the default behaviour is to display no background. To display it, add the format value "well". (See example 4)
  • To display a legend in the column's header and its tooltip, use legend: "label1,label2,label3", where label1, label2 and label3 (and so on) represent the legend's labels. (See example 5)
  • When using the legend property, it is displayed in the column header by default when the Klip is loaded. To change its default display state, use headerlegend: on | off | hidden. Note that, regardless of the headerlegend setting, the legend is always displayed in the tooltip of the column header when using the legend property. (See example 6)
  • Use maxwidth to specify the maximum width of the column.
  • The default height of the chart is height: 1, which is the height of one line. The above screenshot uses this default height. The height may be set to 2 or 3 to span 2 or 3 lines within each item, respectively.
  • Stacked bar charts can be used in a drill down Klip as well.
  • The colours are predetermined by the skin and its hue and cannot be specified through the Klip.

Expected data format

See the Expected data format article for details.


Regardless of how the data source is provided to the chart, the available formatting options are the same.

1. Basic stacked bar charts


type: graph;
itemcol: 5;
format: "stackedbar";

The 100% width of the chart represents the biggest total of data values. In this example, for the first item's total (10+10+40+30) is 90; second item's is 70; and the third item's is 50. Therefore, 90 is used as the 100% value for this column.

2. Specifying a range for all charts in the column

To specify a range to be used by all charts in the column, use the format value "range(0,x)", where x represents the value to be used as the 100% value.


type: graph;
itemcol:6 ;
format: "stackedbar,range(0,100)";

3. Using the sum of values as 100% for each item


type: graph;
itemcol: 7;
format: "stackedbar,full";

By adding the format value "full", the sum of all values for each item is used as its chart's 100% value. For example, for the first item, its 100% value is 90 (10+10+40+30), so each data point is relative to 90. On the other hand, the 3rd item's total is 50 (10+10+10+20); therefore, each segment for the three 10s takes up 1/5 of the entire width, and 20 is 2/5 of the width.

4. Displaying the background

In version 5.5 and later, the background is not displayed by default. Add the format value "well" to display it.


type: graph;
itemcol: 8;
format: "stackedbar,well";

In version 5.4, the default behaviour is to display the background. To eliminate it, use the format value "nowell".

5. Setting up the legend

Use the legend property to display the legend in the column header. List the labels for the legend as its value, comma-separated without spaces between the labels:

type: graph;
itemcol: 9;
format: "stackedbar";
legend: "Team A,Team B,Team C,Team D";
label: "5. Legend";

The above results in the following. Note how the label value ("5. Legend") is used as the title of the legend in the tooltip.

When using the legend property, the legend is displayed by default as shown above, but you can toggle between it and the label by right-clicking on the column header:
When the legend is hidden, the first menu option from right-clicking on the column header changes to "Show legend":

To set the default visibility of the legend, see example 6 below.

6. Setting the default visibility of the legend

Use the headerlegend property with one of the following values to set up the column header:

  • on - displays the legend and turns on the toggling options in the right-click menu. (Default)
  • off - displays the label and turns off the toggling options for the legend display. The legend is only viewable in the tooltip.
  • hidden - displays the column header label but gives the toggling options in the right-click menu.
The following screenshot is from using headerlegend: off. Note the lack of "Show legend" option in its right-click menu:

type: graph;
itemcol: 10;
format: "stackedbar,range(0,100)";
legend: "Team A,Team B,Team C,Team D";
headerlegend: off;

Leave a Comment

To leave a comment, you must sign in or register (it's free).

Comment Type: