<!-- Generated by scripts/gen-docs.mts from the JSDoc in registry/. Do not edit; run `pnpm run docs`. -->

# ChartLegend

The legend for a recharts chart inside `Chart`: each series' marker shape and label from the chart's `config`, under the plot. `Chart` adds it for you with `type` when it draws two or more series.

```tsx
import { ChartLegend } from "@/components/ouro/chart/chart";
```

## Example

```tsx
<Chart title="Recipes" data={months} categoryKey="month" config={config}>
  <BarChart>
    <Bar dataKey="cooked" fill="var(--color-cooked)" />
    <Bar dataKey="saved" fill="var(--color-saved)" />
    <ChartLegend />
  </BarChart>
</Chart>
```

## Usage

Use it only inside a recharts chart passed to `Chart` as children.

## Use instead when

- Use `Chart` with `type` instead when bars, lines or areas are enough: it adds the legend itself.

## Props

Type: `ChartLegendProps`.

## Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

- `content`: Not a prop. ChartLegend draws its own content from the chart's config: `<ChartLegend />`.
