Barchart

Purpose & Application

A barchart shows comparisons among categories.

📝 For example, I want to analyze the basket size profile of my customers.

Hint

Use the barchart for time series when individual observations are more important than pattern detection or distribution.

Keep it simple, do not go over 3 KPIs at once.

Key Features

• Mobile first: units available in the legend to optimize mobile view

• Scrollable and automatic zoom/de-zoom for a better user experience

• Add groups to go deeper in your analysis

For example, I want to compare movies’ budget by type for this year and last year.

• Add a heat bar to see variation and evolutions for different categories

For example, I want to compare countries’ revenue and see if they are performing better than last year.

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
	Value*	Select the column containing the value
	Heatbar - by using Sentiments	Add a heat bar to highlight variation/evolution of different categories by using sentiments (Add units, precisions and sentiments)
	Heatbar - with custom labels (code mode)	Switch in code mode and add a labels array to the sentiment configuration. The values of the labels array will be matched with the values of the range array.
Legend	Display legend	Toggle to activate legend display
Legend	Default bar selected	Choose the first, last or the name of the label
Legend	Additional info	Add another column for more information on the legend
Sort	Bars order - Configuration type	Use it to order bars
Groups	Groups	This option let you group multiple columns together Select a column containing grouping of bars
Groups	Groups order	Use it to order groups
Groups	Groups additional info	Add another column for more information on the group
Display	Display all values on top of bars	Tick to display values on top of bars
Display	Scroll graph to the right	Tick to change the animation when arriving on the chart
Display	Scale	Use it to define the bars scale. Choose 2 bounds if you’re displaying %, try a 0 to 100
Display	Disable zoom in animation	The chart will be zoomable, but will not transition to a zoomed state. All bars will remain visible.
Display	Disable zoom	he chart will not be zoomable. All bars will remain visible.
Display	Recycle group colors	Reuse groups color when chart data changes (filters or requesters). Note: groups must be setup, see Groups section
Display	Custom date tick 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	Size	Enter a proportion of the total screen Use on multiple charts onlyEnter a number from 0 to 1
Display	Mobile size	Enter a proportion of the total mobile screen. Use on multiple charts onlyEnter a number from 0 to 1
Display	Custom CSS class	amazing-class | Set a custom CSS class to target this specific chart with CSS
Tutorial	ID	Enter an ID. Change the ID to display the tutorial again. All tutorials with the same ID will be displayed only once.
Tutorial	Message	Enter your message | This will be displayed to your users
Tutorial	Always show this tutorial	By default the tutorial is shown once only