---
title: "Chart"
description: "Low-level recharts container + themed tooltip / legend. Use ONLY when composing a custom chart with raw recharts primitives. For ordinary bar / line / area / pie / radar / radial charts, prefer the **styled chart wrappers** (`BarChart`, `LineChart`, … — see the `Charts` family). Their `data` + `xKey` + `series` prop surface handles palette + legend + tooltip + container sizing for you in one component."
section: "Libraries"
group: "UI components"
order: 505
---

## Usage

```tsx
import {
  Bar,
  BarChart,
  CartesianGrid,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  XAxis,
  YAxis,
} from "@aeontel/ui";

const config = {
  runs: { label: "Runs", color: "var(--chart-1)" },
};

<ChartContainer config={config}>
  <BarChart data={data}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="day" />
    <YAxis />
    <Bar dataKey="runs" fill="var(--color-runs)" radius={4} />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>;
```

## Exports

### `ChartContainer`

Themed Recharts ResponsiveContainer with CSS variable config injection.

```ts
ChartContainer(props: React.ComponentProps<"div"> & { config: ChartConfig; children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"]; initialDimension?: { width: number; height: number; }; }): JSX.Element
```

**Props**

| Prop                | Type                                              | Default             | Description |
| ------------------- | ------------------------------------------------- | ------------------- | ----------- |
| `config`            | `ChartConfig`                                     | —                   |             |
| `initialDimension?` | `{ width: number; height: number; } \| undefined` | `INITIAL_DIMENSION` |             |

### `ChartStyle`

Injects chart-scoped CSS variables derived from the chart config.

```ts
ChartStyle(props: ComponentProps): JSX.Element
```

**Props**

| Prop     | Type          | Default | Description |
| -------- | ------------- | ------- | ----------- |
| `id`     | `string`      | —       |             |
| `config` | `ChartConfig` | —       |             |

### `ChartTooltip`

Re-export of recharts' `Tooltip` — use with `ChartTooltipContent`.

```ts
ChartTooltip(props: ComponentProps): JSX.Element
```

### `ChartTooltipContent`

Themed tooltip body for use inside `ChartTooltip`.

```ts
ChartTooltipContent(props: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & { hideLabel?: boolean; hideIndicator?: boolean; indicator?: "line" | "dot" | "dashed"; nameKey?: string; labelKey?: string; } & Omit< RechartsPrimitive.DefaultTooltipContentProps< TooltipValueType, TooltipNameType >, "accessibilityLayer" >): JSX.Element
```

**Props**

| Prop             | Type                                       | Default | Description |
| ---------------- | ------------------------------------------ | ------- | ----------- |
| `hideLabel?`     | `boolean \| undefined`                     | `false` |             |
| `hideIndicator?` | `boolean \| undefined`                     | `false` |             |
| `indicator?`     | `"line" \| "dot" \| "dashed" \| undefined` | `"dot"` |             |
| `nameKey?`       | `string \| undefined`                      | —       |             |
| `labelKey?`      | `string \| undefined`                      | —       |             |

### `ChartLegend`

Re-export of recharts' `Legend` — use with `ChartLegendContent`.

```ts
ChartLegend(props: ComponentProps): JSX.Element
```

### `ChartLegendContent`

Themed legend body for use inside `ChartLegend`.

```ts
ChartLegendContent(props: React.ComponentProps<"div"> & { hideIcon?: boolean; nameKey?: string; } & RechartsPrimitive.DefaultLegendContentProps): JSX.Element
```

**Props**

| Prop        | Type                   | Default | Description |
| ----------- | ---------------------- | ------- | ----------- |
| `hideIcon?` | `boolean \| undefined` | `false` |             |
| `nameKey?`  | `string \| undefined`  | —       |             |