Area Chart

A line chart with a filled gradient area beneath each series. Useful for showing volume and trends over time.

Preview

5K4K3K2K1K

JanFebMarAprMayJun

Organic Paid

Features

• Gradient fill -- 18% opacity area fill from series colour to transparent.
• Multi-series -- layer multiple areas for comparison (non-stacked by default).
• Responsive -- SVG scales to container width via preserveAspectRatio.

Props

Prop	Type	Default	Description
data	{ label: string; values: number[] }[]	--	Data points per category
series	{ name: string; color?: string }[]	--	Series configuration
stacked	boolean	false	Stack areas on top of each other
showGrid	boolean	true	Show horizontal grid lines
height	number	200	Chart height in px

Code example

React

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

<AreaChart
  data={[
    { label: 'Jan', values: [1200, 450] },
    { label: 'Feb', values: [2400, 900] },
    { label: 'Mar', values: [3600, 1500] },
    { label: 'Apr', values: [4200, 1800] },
    { label: 'May', values: [4500, 2100] },
    { label: 'Jun', values: [3900, 1650] },
  ]}
  series={[
    { name: 'Organic' },
    { name: 'Paid' },
  ]}
/>

CSS class reference

Class	Purpose
.lex-area-chart__svg	SVG canvas
.lex-area-chart__fill	Filled area polygon
.lex-area-chart__fill--s1 through --s2	Series fill colour
.lex-area-chart__line	Border line on top of area
.lex-area-chart__line--s1 through --s2	Series stroke colour

Accessibility

• Use role="img" with aria-label describing the chart data.
• Provide a hidden data table for screen readers.
• Area fills use sufficient opacity (18%) to remain visible in both themes.

Guidelines

Do

• Use for time-series data where volume matters (traffic, revenue).
• Limit to 2–3 series to avoid overlap confusion.
• Use the stacked variant to show part-to-whole composition.

Don't

• Don't use with many overlapping series — lines become obscured.
• Don't use area charts for categorical comparisons — use a Bar Chart.