Line Chart

Line charts are especially helpful in tracking behavioral changes and showing trends in data. In addition to serving as a snapshot of historical data over a period of time, analysis of the chart can be used to make predictions about how the series data may behave in the future.

Including multiple series in a chart can highlight differences and correlations within your data, depending on each line’s path and potential intersections. When showing multiple lines within a chart, each series should have the same relationship to the measured category as summarized by the chart’s title. They should use the same values and have a similar scale. Series that are vastly different in scale might not be best to include for comparison purposes as it can reduce precision in the visual representation of the chart, and analysis can be summarized easily without it.

When the chart shows multiple lines, use different colors to distinguish between series within the chart (see color below). Charts with fewer lines are easier to consume, while too many lines can cause clutter and make the visualization difficult to understand.

The legend will automatically reposition below the chart’s x-axis for smaller viewports. This is true for tablet views in which a chart occupies a 3-grid column and all mobile chart views. The legend’s placement is programmatically determined in the chart’s code. Consider how your data will look across multiple devices, as smaller charts cannot accommodate multiple series as easily as larger charts.

Line chart uses a tooltip to display values for each data point included on a series. The DV tooltip is designed specifically for data visualization components, and can be found in the Data visualization library in Figma. On desktop, the DV tooltip is activated on hover or keyboard focus. On mobile, it is activated by press.

Avoid placing too many lines within the same chart
While there is not a recommended maximum number of lines a chart can support, consider the chart size and responsive behavior when adding multiple lines within a chart. Too many lines within the same chart can negatively impact a chart’s readability.

Each line must be easily distinguished from the others
In addition to quantity, line color also plays an important part in readability. In charts where multiple lines are shown, using the categorical color palette with sequences preserved will help maintain contrast between lines.

All tooltips should be able to be activated and dismissed via pointer, keyboard, and touch
Users should have full control of the tooltip interaction regardless of device. Do not cause the tooltip to disappear or timeout after a set interval.
WCAG 2.1: 1.4.13 Content on Hover or Focus

Data within the tooltip should correspond to its data point
Tooltips should show the values that correspond to the data point that activates it. Each tooltip in your application should show the values in the same way.

Chart title
Be brief and descriptive about the subject the chart is presenting. Optionally include a subtitle if it’s necessary to provide more context about the chart. Every chart should include a chart title, except in cases where you’re showing more than one chart in the same container or widget. In this case, a group title should suffice.

Chart labels
Use concise and clear y- and x-labels to describe how you’re measuring data within your chart.

DV tooltip
Be consistent in how you present information in data tooltips across your product experience. Each tooltip in a chart should repeat the same format of information so users don’t incorrectly read data.

DV tooltip text
Content should replicate the y and x labels on the graph, showing the specific values of the data point once activated.

Capitalization
Use sentence case unless providing an explanation for an acronym or initialism.

Legend text
Use concise and clear labels for items within the legend.