Line Chart

A multi-series line chart for displaying trends over time. Includes axes, grid lines, data point dots, and hover tooltips.

Preview

5040302010

JanFebMarAprMayJun

Revenue Expenses Profit

With tooltip

March 2026

Revenue$38.2K

Expenses$24.1K

Profit$14.1K

Props

Prop	Type	Default	Description
data	{ label: string; values: number[] }[]	--	X-axis data points with values per series
series	{ name: string; color?: string }[]	--	Series configuration
showGrid	boolean	true	Show horizontal grid lines
showDots	boolean	true	Show data point markers
showTooltip	boolean	true	Show hover tooltip
yAxisLabel	string	--	Y-axis title
height	number	200	Chart height in px

Code example

React

import { LineChart } from '@thepace/lexicon/components';

<LineChart
  data={[
    { label: 'Jan', values: [12, 8, 4] },
    { label: 'Feb', values: [18, 14, 6] },
    { label: 'Mar', values: [32, 24, 14] },
    { label: 'Apr', values: [38, 28, 16] },
    { label: 'May', values: [42, 32, 18] },
    { label: 'Jun', values: [48, 36, 22] },
  ]}
  series={[
    { name: 'Revenue' },
    { name: 'Expenses' },
    { name: 'Profit' },
  ]}
/>

CSS class reference

Class	Purpose
.lex-chart	Shared chart container
.lex-chart__plot	Plot area
.lex-chart__grid	Grid line container
.lex-chart__grid-line	Individual grid line
.lex-chart__x-axis	X-axis labels
.lex-chart__y-axis	Y-axis labels
.lex-line-chart__svg	SVG canvas
.lex-line-chart__line	Data series line
.lex-line-chart__dot	Data point marker

Accessibility

• Use role="img" with aria-label describing the chart's purpose.
• Provide a tabular data alternative (hidden table or expandable section) for screen readers.
• Use distinct line styles (solid, dashed, dotted) in addition to colour to support colour-blind users.
• Data point dots enlarge on hover to improve target size.

Guidelines

Do

• Limit to 3–4 series for readability.
• Label both axes clearly.
• Use a legend when showing multiple series.

Don't

• Don't use more than 5 series — the chart becomes unreadable.
• Don't use 3D line effects.
• Don't remove axis labels or grid lines on data-heavy charts.