Chart
Accessible SVG line or area chart with tooltip and data table.
Use Chart for a labelled trend with one or more stable series when readers need axes, values, and accessible source data.
Interactive example
Loading interactive example
API
| Member | Type | Kind | Required | Default |
|---|---|---|---|---|
curve | ChartCurve | prop | No | 'monotone' |
directLabels | boolean | prop | No | false |
empty | Snippet | snippet | No | undefined |
height | number | prop | No | 280 |
label | string | prop | No | undefined |
loading | boolean | prop | No | false |
onPointHover | (hover: ChartHover | null) => void | callback | No | undefined |
series | ChartSeries[] | prop | Yes | |
showGrid | boolean | prop | No | true |
showLegend | boolean | prop | No | undefined |
showTooltip | boolean | prop | No | true |
showXAxis | boolean | prop | No | true |
showYAxis | boolean | prop | No | true |
size | ControlSize | prop | No | 'md' |
tickFormatX | (x: number) => string | callback | No | undefined |
tickFormatY | (y: number) => string | callback | No | compactNumber |
tooltipContent | Snippet<[ChartHover]> | snippet | No | undefined |
variant | ChartVariant | prop | No | 'area' |
xScale | ChartXScale | prop | No | 'time' |
xTicks | number | prop | No | 6 |
yMax | number | prop | No | undefined |
yMin | number | prop | No | undefined |
yTicks | number | prop | No | 5 |
Examples
Source
Loading source