Line Chart

Continuous trends over time with multiple series support. Supports smooth, linear, and stepped interpolation.

Examples

data*

Record<string, string | number>[]

Array of data objects, one per x-axis point.

index*

string

Key used as the x-axis label.

categories*

string[]

Keys to render as line series.

colors= palette

string[]

Override chart palette colours for this instance.

curveType= 'monotone'

'linear' | 'monotone' | 'step'

Interpolation style between data points.

showDots= false

boolean

Show a dot at each data point.

valueFormatter= —

(value: number) => string

Format values on the y-axis and in the tooltip.

showLegend= auto

boolean

Show series legend. Auto-shown when categories.length > 1.

showGrid= true

boolean

Show a horizontal background grid.

height= 300

number

Fixed height of the chart in px.

className= —

string

Extra class on the outer container.

Prop	Type	Default	Description
data*	Record<string, string \| number>[]	—	Array of data objects, one per x-axis point.
index*	string	—	Key used as the x-axis label.
categories*	string[]	—	Keys to render as line series.
colors	string[]	palette	Override chart palette colours for this instance.
curveType	'linear' \| 'monotone' \| 'step'	'monotone'	Interpolation style between data points.
showDots	boolean	false	Show a dot at each data point.
valueFormatter	(value: number) => string	—	Format values on the y-axis and in the tooltip.
showLegend	boolean	auto	Show series legend. Auto-shown when categories.length > 1.
showGrid	boolean	true	Show a horizontal background grid.
height	number	300	Fixed height of the chart in px.
className	string	—	Extra class on the outer container.