Charts
Styled chart wrappers — the default way to render data in an element. Each takes `data` (array of rows), `xKey` (the field used as the x/category axis), and `series` (one entry per bar / line / slice). Palette, legend, tooltip, container sizing all handled automatically. **Do NOT** nest recharts primitives (`<Bar>`, `<XAxis>`, `<YAxis>`, `<CartesianGrid>`) inside these wrappers — they're not recharts containers. If you need full control over recharts internals, drop down to `ChartContainer` from the `Chart` family + the recharts primitives directly. Single-series categorical charts (`BarChart` / `PieChart` / `RadialChart` with one series) auto-cycle a palette per row; multi-series charts color per series.
Exports
BarChart
TypeScript
BarChart(props: BarChartProps): JSX.ElementProps
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, unknown>[] | — | |
xKey | string | — | |
series | BarChartSeries[] | — | |
orientation? | "horizontal" | "vertical" | undefined | — | |
stacked? | boolean | undefined | — | |
variant? | "default" | "mixed" | undefined | — | |
colorKey? | string | undefined | — | |
showLabels? | boolean | "inside" | "outside" | undefined | — | |
showLegend? | boolean | undefined | — | |
showGrid? | boolean | undefined | — | |
showAxes? | boolean | undefined | — | |
className? | string | undefined | — |
LineChart
TypeScript
LineChart(props: LineChartProps): JSX.ElementProps
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, unknown>[] | — | |
xKey | string | — | |
series | LineChartSeries[] | — | |
curve? | "linear" | "step" | "monotone" | undefined | — | |
dots? | boolean | undefined | — | |
showLabels? | boolean | undefined | — | |
showLegend? | boolean | undefined | — | |
showGrid? | boolean | undefined | — | |
showAxes? | boolean | undefined | — | |
className? | string | undefined | — |
AreaChart
TypeScript
AreaChart(props: AreaChartProps): JSX.ElementProps
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, unknown>[] | — | |
xKey | string | — | |
series | AreaChartSeries[] | — | |
curve? | "linear" | "step" | "monotone" | undefined | — | |
stacked? | boolean | undefined | — | |
stackMode? | "normal" | "expanded" | undefined | — | |
gradient? | boolean | undefined | — | |
showLegend? | boolean | undefined | — | |
showGrid? | boolean | undefined | — | |
showAxes? | boolean | undefined | — | |
className? | string | undefined | — |
PieChart
TypeScript
PieChart(props: PieChartProps): JSX.ElementProps
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, unknown>[] | — | |
nameKey | string | — | |
valueKey | string | — | |
colorKey? | string | undefined | — | |
innerRadius? | number | undefined | — | |
outerRadius? | number | undefined | — | |
centerText? | { primary: string; secondary?: string; } | undefined | — | |
labels? | "none" | "inline" | "list" | undefined | — | |
separator? | boolean | undefined | — | |
activeIndex? | number | undefined | — | |
showLegend? | boolean | undefined | — | |
className? | string | undefined | — |
RadarChart
TypeScript
RadarChart(props: RadarChartProps): JSX.ElementProps
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, unknown>[] | — | |
nameKey | string | — | |
series | RadarChartSeries[] | — | |
grid? | "circle" | "polygon" | "none" | "circle-filled" | "filled" | undefined | — | |
gridLines? | boolean | undefined | — | |
dots? | boolean | undefined | — | |
linesOnly? | boolean | undefined | — | |
fillOpacity? | number | undefined | — | |
showLegend? | boolean | undefined | — | |
className? | string | undefined | — |
RadialChart
TypeScript
RadialChart(props: RadialChartProps): JSX.ElementProps
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, unknown>[] | — | |
nameKey | string | — | |
valueKey? | string | undefined | — | |
series? | RadialChartSeries[] | undefined | — | |
innerRadius? | number | undefined | — | |
outerRadius? | number | undefined | — | |
startAngle? | number | undefined | — | |
endAngle? | number | undefined | — | |
shape? | "default" | "rounded" | undefined | — | |
showLabels? | boolean | undefined | — | |
centerText? | { primary: string; secondary?: string; } | undefined | — | |
showGrid? | boolean | undefined | — | |
showLegend? | boolean | undefined | — | |
className? | string | undefined | — |