---
title: "Charts"
description: "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."
section: "Libraries"
group: "UI components"
order: 506
---

## Exports

### `BarChart`

```ts
BarChart(props: BarChartProps): JSX.Element
```

**Props**

| 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`

```ts
LineChart(props: LineChartProps): JSX.Element
```

**Props**

| 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`

```ts
AreaChart(props: AreaChartProps): JSX.Element
```

**Props**

| 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`

```ts
PieChart(props: PieChartProps): JSX.Element
```

**Props**

| 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`

```ts
RadarChart(props: RadarChartProps): JSX.Element
```

**Props**

| 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`

```ts
RadialChart(props: RadialChartProps): JSX.Element
```

**Props**

| 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`                                   | —       |             |