Stacked Barchart

Purpose & Application

Good to visualise a breakdown by category for a whole entity. Thus, making it easy to notice the strengths and weaknesses of each subset and their impact on the activity of a department for example.

This chart goes beyond the horizontal barchart or leaderboard as it can be used to compare parts of a same entity. Each bar is an element of the 1st dimension, split between each of the element of the second dimension.

๐Ÿ“ For example, I want the sales by product and see which country is contributing the most to the sales.

Key features

What makes this chart a killer story?

  • Automated calculation this chart calculates for you the total for each labels.

  • Choose the display of the chart! If youโ€™re looking at time information, think of setting this chart to vertical display ๐Ÿ—“๏ธ!

We used to display this chart horizontally, but donโ€™t forget that you can also display it vertically!


*Mandatory parameters

SectionOptionConfiguration tutorial


Select the dataset used by the chart


This will define the name of each of the bars you want to display.

Select the column containing bar label


Your groups of choice


Select the column containing the value


Display Legend

Toggle to activate legend display


Default selected bar

Choose the first, last or the name of the label


Additional info

Add another column for more information on the legend


Sort bars

Use it to order bars


Labels order

Use it to order labels


Groups order

Use it to order groups


Groups additional info

Add another column for more information on the group

Packs (Horizontal Display Only)


Group labels together based on a column

Packs (Horizontal Display Only)

Packs order

Order pack based on a column, on an advanced order or a custom order

Packs (Horizontal Display Only)

Display packs names

Toggle to display packs names

Lines (vertical display only)

X axis

Use to choose X axis same as bar labels

Lines (vertical display only)

Y axis

Use to choose Y axis

Lines (vertical display only)

Smooth line

Toggle to interpolate between poinfs

Lines (vertical display only)

Show all values on line

Toggle to show all values on line

Lines (vertical display only)

Use same scale for bars and lines

Toggle to use same scale for bars and lines

Enrich chart


Add a variation in your data with your evolution values

Enrich chart

URL link

Add url link to bars label


Custom Date format (for date labels)

This option lets you display your dates just the way you want. Insert d3 time format (.i.e. โ€˜%Yโ€™ to display just years.)


Hide bar total

Toggle to hide bar total


Hide empty groups

Toggle to hide empty groups


Display all values

Toggle to display all values included negative values


Recycle groups colors

Reuse groups colors when chart data changes (filters changes for example)


Highlight selected bar

Toggle to display rectangle around selected bar


Choose display direction

Choose a vertical or horizontal display direction



Define the chart size when having multiple ones


Mobile size

Define the chart size when having multiple ones on mobile


Custom CSS class

Set a custom CSS class to target this specific chart with CSS


Enter an ID

Enter an ID.

Change the ID to display the tutorial again.

All tutorials with the same ID will be displayed only once


Enter a message

Enter your message | This will be displayed to your users


Always show this tutorial

By default the tutorial is shown once only

Last updated