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

Section	Option	Configuration 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