Ouro HX

Data

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.

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

Example

<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 />.
Source on GitHubThis page as Markdown