Barlinechart
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
New Chart Design
*Mandatory parameters
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
Bars groups
Select the column containing the name of the parent bars to group them
Bars
Show all bar values
Displays values on top of bars. Activated by default.
Lines
Y axis*
Select the column name containing y axis values
Sort
Labels order
Order labels based on a column, an advanced order or a custom order.
Display
Use same scale for bars and lines
Enhance readability of barlinecharts
Previous Chart Design
*Mandatory parameters
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)
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
Insert d3 time format.i.e. ‘%Y’ to for years. Click for more info on formats.