Barlinechart

Purpose & Application

This chart is singular because it helps correlate volume and variation.

Confront dimensions with different scales (values and %, etc.).

📝 For example, I want to analyze how my BUs sales and margin have evolved”

It is ideal because the superposition of the bar chart and the line chart allows the correlation between a volume and a variation.

What is amazing about the barline chart is that it reveals all trends or progress over time and can be used to show different categories of data. You can therefore use it to expose a set of continuous data.

This graph is relevant if you want two metrics with different value scales : 3% and 3 000 k€.

📝 For example, you can use this combo to analyze your energy consumption over time, while evaluating its evolution.

Configuration

*Mandatory parameters

Section	Option	Configuration tutorial
	Dataset*	Select the dataset used by the chart
	Bars Label*	Select the column containing the label of bars
	Bars Value*	Select the column containing the value of bars
Bars	Scale	Select 2 bounds. If you’re displaying %, try a 0 to 100.
Bars	Y Axis Baseline	Select the Y value on which to position the x axis. By default, set to 0.
Bars	Show all bar values	Display values on top of bars.
Bars	Bars groups	Select the column containing the name of the parent bars to group them.
Bars	Custom date tick format (for date bars label)	Insert d3 time format.i.e. ‘%Y’ to for years. Click here for more info on formats.
Bars	Hide empty bar groups	Enable to hide empty bar groups.
Lines	Y axis*	Select the column name containing y axis values
Lines	Scale	Select 2 bounds. If you’re displaying %, try a 0 to 100.
Lines	Smooth line	Interpolate between the points to smooth the line
Lines	Groups	Select the column containing the name of the parent lines to have multiple ones.
Lines	Groups additional info	Add other columns for more information in the legend
Lines	Y Axis Baseline	Select the Y value on which to position the x axis. By default, set to 0.
Lines	Show all values on line	Show all values on each point of lines. ⚠️ This is not recommended
Lines	Display bars on top of lines	Display bars on tops of lines
Legend	Display legend	Toggle to activate legend display
Legend	Legend of X Axis	Write to display close the X axis
Legend	Legend of Y Axis	Write to display close the Y axis
Legend	Default selected bar	Display first, last or name of the X Axis value
Legend	Additional infos	Add other columns for more information in the legend
Sort	Labels order	Order labels based on a column, an advanced order or a custom order.
Sort	Groups order	Order groups based on a column, an advanced order or a custom order. For legend display only
Display	Use same scale for bars and lines	Enhance readability of barlinecharts
Display	Scroll graph to the right	When drawing the chart, scrolling to the last bars
Display	Disable zoom in animation	Disable initial zoom when the chart is drawing itself.
Display	Disable zoom	The chart will not be zoomable. All bars will remain visible.
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 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 display this tutorial	By default the tutorial is shown once only