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
| 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 |
Last updated
