Note: Use only when data points are continuous; the chart assumes a logical progression and meaningful connection between all points.
General Design Guidelines
Example of a line chart using and hover state:
- Headline
- Axis label
- Legend label
- Direct labeling
- Hover state tooltip
Variable ordering
| 1 Variable | 2 Variables | 3 Variables | 4+ Variables |
|---|---|---|---|
| If your chart has one variable, start with the default blue hue in the palette. | If your chart has two variables, use the default and dark blue. | If your chart has three variables, add the cyan. | For 4+ variables, continue with the categorical color palette. |
 |  |  |  |
One Variable
Two Variables
Three Variables
Four Variables
Shapes
Shapes in line charts help tell data series apart. When using 3 or more variables, adding distinct shapes improves accessibility for color-blind or visually impaired users. Make sure the legend uses shapes only to clearly show each series. Follow the shape order as it is displayed below.Note: Working with an edge case and need more shape options? Feel free to reach out in the #askvizd channel, we’re happy to help!
Real Example #1
The following is a real-world example from our product. This example displays 3 variables in a single line chart. It uses the first three colors of the categorical color palette and shapes to show the difference between each line.
How to Use
The following Do’s and Don’ts illustrate best practices and common mistakes to help guide effective use of line charts in data visualizations.
Domake sure the shapes in your line charts are a consistent, readable size—neither too small nor too large. Match the shape size to the example above. The final size may vary depending on factors like chart dimensions and screen resolution.
Don'tuse large chart shapes - it will make the layout look visually unbalanced.
Douse shapes for line charts with 3+ variables
Don'tuse shapes on line charts with less than 2 variables.
Doensure readability by using a clear and balanced number of axis labels.
Don'tclutter the chart with excessive Y-axis labels that hinder clarity. The example above shows Y-axis labels in increments of 100 (100, 200, 300, and so on). When possible, reduce labels to increase clarity and legibility.
Dorepresent the current year's line up to the last available data point, keeping it cut off or partially shown, not extending fully to the end of the year.
Don'textend the current year's line fully to the end of the year if data is not yet complete, as this misleadingly suggests that the full year's data is available and potentially distorts the perception of trends or performance.
Doensure optimal clarity and prevent visual clutter in line charts by limiting variables to no more than 6 total. Please utilize the categorical color palette in its defined order, as specific highlighting is generally not needed when users can access detailed information via hover states.
Don'tuse more than 6 colors or variables in a line chart. This creates visual clutter, making it hard to distinguish lines and understand the data effectively.
Area of Focus & Hover States
Below is an example of Area of Focus charts that use subtle emphasis of color to highlight key data without losing overall context.In contrast, hover states apply stronger, interactive visual changes to indicate active user engagement and selection.
Area of Focus
To highlight a single variable, use the default blue for the focused variable and grey 600 for all others. In this scenario, there should be no cursor for the area of focus, this represents a focus state, not a hover interaction.Hover State
When in hover states, set all non-hovered elements to 20% opacity to keep focus on the highlighted data point, and use Anvil’s Tooltip component to display the value/label on hover.
Keep the Content Consistent
On the “Progress Over Time January” line chart below, the viewer can toggle six variables. To ensure each variable keeps its assigned color when toggled: turning a variable off should only hide it, not reassign or shift colors among the remaining series. For example, if Completed Tasks is unchecked, its color remains reserved so the visible lines, legend, and visual mapping stay stable. Do not change the styling or reassign colors (for example, altering color, stroke, or pattern).All checked variables are visible
Unchecked, one variable
Questions? Challenges?
Contact the Visual Design team on the #ask-vizd channel