Line Chart

Figma | Storybook

Overview

Line charts visualize data by connecting points in one or more data series with lines. Line charts are best suited to identify and compare trends in data over time.

Other names: Line Graph, Line Plot


Behaviors

Legend visibility

The chart’s legend displays the names of the data series. Selecting a legend item toggles the visibility of that data series' data points and line. When a data series is hidden, its legend item appears greyed out with a strikethrough.

All data should be displayed by default. Users can then decide what they want to hide or show.

Always show the legend, unless there's only one data series. In that case, if you choose to not show the legend, make sure to use a title for the chart that describes what the data represents.

For more information, read Kendo's legend guide.

Tooltip

Hovering over a line displays a tooltip for the data point closest to the mouse on that line.


Usage guidelines

General

Do use line charts:

  • If you have a continuous dataset that changes over time
  • If your dataset is too big for a bar chart
  • If you want to display multiple series for the same timeline
  • If you want to visualize trends instead of exact values

Don’t use line charts:

  • If you have a small dataset

Content guidelines

Labels
Line chart labels should be short, while still clearly describing the data. Use sentence case.

Tooltips
Line chart tooltips should contain the data value and name. Review tooltip guidance for more best practices.


Severity

If you’re using a line chart to visualize severity, use the labels outlined in severity guidelines and the colors in the styles section.


Status

If you’re using a line chart to visualize statuses, the statuses are success, warning, error, and informational. Refer to the colors in the styles section.


Related

Referenced in this section:

Bar chart component

Colors guidelines

Data visualization guidelines

Severity guidelines

Tooltip component

Typography guidelines