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!

Configuration

*Mandatory parameters

SectionOptionConfiguration tutorial

Dataset*

Select the dataset used by the chart

Label*

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

Select the column containing bar label

Groups*

Your groups of choice

Value*

Select the column containing the value

Legend

Display Legend

Toggle to activate legend display

Legend

Default selected bar

Choose the first, last or the name of the label

Legend

Additional info

Add another column for more information on the legend

Sort

Sort bars

Use it to order bars

Sort

Labels order

Use it to order labels

Sort

Groups order

Use it to order groups

Groups

Groups additional info

Add another column for more information on the group

Packs (Horizontal Display Only)

Packs

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

variation

Add a variation in your data with your evolution values

Enrich chart

URL link

Add url link to bars label

Display

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.)

Display

Hide bar total

Toggle to hide bar total

Display

Hide empty groups

Toggle to hide empty groups

Display

Display all values

Toggle to display all values included negative values

Display

Recycle groups colors

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

Display

Highlight selected bar

Toggle to display rectangle around selected bar

Display

Choose display direction

Choose a vertical or horizontal display direction

Display

Size

Define the chart size when having multiple ones

Display

Mobile size

Define the chart size when having multiple ones on mobile

Display

Custom CSS class

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

Tutorial

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

Tutorial

Enter a message

Enter your message | This will be displayed to your users

Tutorial

Always show this tutorial

By default the tutorial is shown once only

Last updated