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

SectionOptionConfiguration 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

Last updated