LineChart

A time series or trend over an ordered category axis. Registers only the line, grid, tooltip and legend modules; the zoom and reference-line components are added on demand. See Charts overview for the loading, empty, events and ref props shared by every chart.

Basic

<LineChart  theme={resolvedTheme}  ariaLabel="Weekly active users over six weeks"  categories={['W1', 'W2', 'W3', 'W4', 'W5', 'W6']}  series={[    { name: 'Active', data: [820, 932, 901, 1034, 1120, 1284] },    { name: 'New', data: [120, 182, 191, 234, 290, 330] },  ]}/>

Stacked area

stack stacks the series into a cumulative total; area fills beneath each line. valueFormatter formats both the value axis and the tooltip.

<LineChart  area  stack  valueFormatter={(v) => `$${(v / 1000).toFixed(0)}k`}  ariaLabel="Revenue by plan over six months"  categories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}  series={[    { name: 'Team', data: [12000, 14500, 16000, 18500, 21000, 24000] },    { name: 'Enterprise', data: [8000, 9500, 12000, 15000, 17500, 20000] },  ]}/>

Zoom & pan

dataZoom adds a slider and drag-to-zoom inside the plot — worth it once a series runs long.

<LineChart  dataZoom  showLegend={false}  ariaLabel="Daily turnaround over 60 days"  categories={categories}  series={[{ name: 'Turnaround', data }]}/>

Props

Prop	Type	Default	Notes
`categories / series`	`(string \| number)[] / Series[]`	—	X-axis labels and named series of numbers.
`area / smooth`	`boolean`	`false`	Fill beneath the line / draw curved lines.
`stack`	`boolean`	`false`	Stack series into a cumulative total.
`dataZoom`	`boolean`	`false`	Slider and drag-to-zoom for long series.
`referenceLines`	`{ value, label?, color? }[]`	—	Target or threshold lines across the value axis.
`valueFormatter`	`(value: number) => string`	—	Format values on the value axis and in tooltips.
`colors`	`string[]`	—	Override the theme palette; one colour per series.