Linechart

Purpose & Application

Generally, this visualization is used for temporal data.

๐Ÿ“ For example, I want to see the evolution of my sales across the year.

Linecharts are used to display a quantitative value, over a continuous duration.

Concerning this chart therefore, most often, it is used to show trends and interconnections. Linechart also helps to provide a global vision of a given interval, to assess its growth over a certain period of time.

When using a line chart, it is advisable to limit the chart to 3 lines, to keep the reading simple and easy.

Key features

What makes this chart a killer story?

  • Link 2 charts! The linechart is the perfect master chart. While navigating on your timeline, update the second chart of your story ๐Ÿ”„

  • Events! You have context or event explaining a change in the trend you are visualizing? Add events to your linechart ๐Ÿ—“๏ธ

For example, we are looking at the evolution of the number of fans of a social media page. We can see an impressive increase in the number of fans. Why?

What happen to make this sudden popularity increase? Oh yes! The community management campaign! Let your user know.

  • Color coding ๐Ÿšฆ makes it easy to identify best/worst performer without even reading the numbers. Add sentiment zones to your linechart to identify easily when youโ€™ve reached a critical value

For example, Iโ€™m tracking the usage rate of new device I gave to my sales team. I can set up an expected usage rate range and analyze day by day the usage of my team on the field.

Configuration

*Mandatory parameters

SectionOptionConfiguration Tutorial

Dataset*

Select the dataset used by the chart

X Axis*

Your value for the X Axis

Y Axis*

Your value for the Y Axis

Legend

Display Legend

Toggle the legend display

Legend

Reflect Value Order In The Legend

Sort you values in the legend

Legend

Maintain Selection

Keep the selection when clicking on a point

Legend

Legend For X Axis

Display a legend for your X Axis

Legend

Legend For Y Axis

Display a legend for your Y Axis

Legend

Additional Info

Display contextual in-depth info

Legend

Default Selected Value

Display first, last or name of the X Axis value

Multi-Linechart

Add multiple lines to your linechart

Multi-Linechart

Series Label

Display label based on column containing lines name

Multi-Linechart

Groups Additional Info

Display label based on column containing lines name but will be display in the legend

Multi-Linechart

Series Order

Order based on a column, an advanced order or a custom order. For legend display only

Sort

X Axis Order

Order based on a column, an advanced order or a custom order. Use this if your X Axis is not a time dimension

Enrich Chart

Activate options to give more info on your linechart

Enrich Chart

Always Display All Events

Display all your configured events all the time

Enrich Chart

Events

Add contextual info on your line. As the user navigates, some text can pop up on specific dates

Enrich Chart

Events - X

Display a text for your X Axis value. Should match the format of the X Axis. Choose between text and number configuration type

Enrich Chart

Events - Description

Enter your event description. Will be display when hovering the element

Enrich Chart

Events - Series Label

Enter your series label. Use it for multiple linechart. By default the event is displayed on all the lines

Enrich Chart

Color Zones

Add colored zones. You can add multiple zones one by one

Enrich Chart

Color Zones - Min And Max Value

Enter the minimum and maximum value of your colored zone based on whether a fixed value, from a column or a dynamic value

Enrich Chart

Color Zones - Zone Legend

Enter a text for your zone legend that will be display in your colored zone

Enrich Chart

Color Zones - Sentiment Color

Choose what color will be displayed in the zone, you can change color coding in the Color Scheme menu

Enrich Chart

Color Zones - Label Position

Choose where to display the label of your colored zone

Enrich Chart

Color Zones - Display Color Zone In Legend

Choose whether to color your legend based on your colored zone

Enrich Chart

Color Zones - Always Display The Color Zone

Always display the color zone even if all the values are below or above it

Enrich Chart

Dashed Lines

Choose the line which will be dashed. You can add dashed lines manually or based on a column

Ticks Format

X Axis Date Format

Customize the date display on the X AXis. Use d3 time format for this

Ticks Format

Ticks Display - Display All X Ticks

Will overwrite smart ticks display

Ticks Format

Ticks Display - Display All Y Ticks

Will overwrite smart ticks display

Ticks Format

Ticks Display - Hide Start And End Ticks

Will hide start and end ticks

Ticks Format

Ticks Display - Show Ticks Indicator

Will show ticks indicator

Ticks Format

Ticks Display - Add X Ticks Manually

Choose the X values to display as ticks

Display

Activate options to customize your linechart display

Display

Smooth Line

Interpolate between the points to smooth the line

Display

Don't Adapt Y Axis

Resize the y axis when filtering

Display

Display Missing Value

Cut the line instead a joining point when a value seems missing

Display

Recycle Line Color

Reuse line color when chart data changes (when filtering)

Display

Y Axis Baseline

Set the Y value on which to position the X Axis. By default, it is set to 0. You can set a custom baseline, use a column from your current dataset or an automatic baseline

Display

Scale

Enter two value to define the minimum and maximum scale on which you want to display the linechart

Display

Show All Values On Line

Display all the values on your linechart. This is not recommended because of display issues that may cause

Display

Size

Use on multiple chart only. Enter a number from 0 to 1

Display

Mobile Size

Use on multiple chart only. Enter a number from 0 to 1

Display

Custom CSS 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