Line Chart

Line charts are used to show how the measure or value of something changes over time, or another continuous variable. The continuous variable is plotted on the X-axis, while the Y-axis indicates measurement. Multiple lines on a line chart allow the viewer to compare multiple items or categories of data.
‍

Types

Single Line Chart

When plotting only a single line, select a color from our one-color Categorical palette. A legend is not needed, as long as the chart title and caption accurately describe what data is being displayed.

Large & Medium Snapshots (567px+)

Small & Extra Small Snapshots (<567px)

Small width single line chart
Small line charts are best for showing the general change over time, rather than specific values. The limited size does not allow for the interactive hover tooltip. Consider listing the values below the chart.

Single Hover Behavior

Isolated Hover

Multiple Line Chart

Line charts can accommodate up to six categories. Beyond this, it’s difficult for users to discern the difference between lines, and an alternate solution should be considered for displaying the data.

Large & Medium Snapshots (567px+)

Small & Extra Small Snapshots (<567px)

Small width multiple line chart
Works best with a maximum of 3 lines. The limited size does not allow for the interactive hover tooltip. Consider listing the values below the chart.

Multiple Hover Behavior

Isolated Hover

When you want to zoom in on a single category, an isolated tooltip allows you to feature more data points for a single category. The other categories fade into the background on hover in order to focus attention on the single category.

Unselected Lines (not hovered)
opacity: 30%

Comprehensive Hover

When you need to compare all categories at once, implement a comprehensive tooltip that notes each Y-axis value at any given point.

Specifications

Line Style and Color Usage

Use the three-color Contrast palette for multiple line charts. To optimize the difference between lines, use solid lines for the first three categories, and dotted lines for the remaining categories.

Blue (Solid)

Teal (Solid)

Magenta (Solid)

Blue (Dotted)

Teal (Dotted)

Magenta (Dotted)