Components
Chart
Multi-chart component for data visualization. Supports line, area, bar, column, pie, and donut types with tooltips, legends, zoom, pan, and export controls.
Quick Start
A minimal working chart. Provide data, specify which key maps to the X-axis and which series map to Y-axes.
Charts render SVG-based data visualization. Pass data, xKey, and yKeys. The component handles rendering, tooltips, and responsive sizing.
Chart Types
Chart supports 6 types. All use the same data structure — just change the <code>type</code> prop.
All 6 types share the same data structure. Change the type prop to switch between line, area, bar, column, pie, and donut.
Customization
Control colors, tooltips, legend visibility, grid lines, and chart height via props.
Customize colors per-series via yKeys[].color, toggle tooltip/legend/grid with boolean props, and set height with height.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "line" | "area" | "bar" | "column" | "pie" | "donut" | "line" | Chart type. |
| data | Record<string, any>[] | — | Array of data objects. |
| xKey | string | — | Key for X-axis values. |
| yKeys | { key: string; name: string; color?: string }[] | — | Y-axis series definitions. |
| showLegend | boolean | true | Show the chart legend. |
| showTooltip | boolean | true | Show tooltips on hover. |
| height | number | 300 | Chart height in pixels. |
| showGrid | boolean | true | Show grid lines. |
"line" | "area" | "bar" | "column" | "pie" | "donut"
Chart type.
Record<string, any>[]
Array of data objects.
string
Key for X-axis values.
{ key: string; name: string; color?: string }[]
Y-axis series definitions.
boolean
Show the chart legend.
boolean
Show tooltips on hover.
number
Chart height in pixels.
boolean
Show grid lines.