Linechart
Last updated
Last updated
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.
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.
*Mandatory parameters
| Section | Option | Configuration 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
