Linechart

✨ New Chart Design Available

What's new?

• Interactive Legend with Filterable Checkboxes

• Consistent Data Labels Hover

• Enhanced Tick Management & Zoom Tool

• Streamlined Smart Editor Options

---

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

New Chart Design

*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
Multi-linechart	Series label	Display label based on column containing lines name
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 - Choose a sentiment color	Choose what color will be displayed in the zone, you can change color coding in the Color Scheme menu
Ticks format	X axis date format	Customize the date display on the X AXis. Use d3 time format for this ex. %Y-%m-%d.
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	Toggle gradient	By default the toggle is activated so that your line chart gets a color gradient

Previous Chart Design

*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