Legend

The <Legend> component auto-discovers its context and renders the appropriate legend style.

Behaviour

• Inside <Chart> with cartesian marks — renders series toggles (click to show/hide). Auto-discovers registered marks (<LineMark>, <BarMark>, etc.) from Chart context.
• Inside <Chart> with <Choropleth> — renders a quantile colour bar with min/max labels and a spring-animated marker tracking the hovered value.
• Explicit props — pass breakpoints + colors for manual quantile mode, or items for manual series mode.

Cartesian usage

When placed inside a <Chart> with marks, Legend auto-discovers them — no props needed:

import { Chart, LineMark, BarMark, Legend } from "@exhibit/charts";

<Chart data={data} xDataKey="month" height={360}>
  <BarMark dataKey="sales" name="Sales" color="#3b82f6" />
  <LineMark dataKey="target" name="Target" color="#f59e0b" />
  <Legend />
</Chart>

Click a legend item to toggle its series visibility.

Geo usage

When placed inside a <Chart> with <Choropleth>, Legend auto-discovers the quantile scale:

import { Chart, Choropleth, Legend } from "@exhibit/charts";

<Chart height={620}>
  <Choropleth geoData={geo} data={popData} featureIdKey="LAD24CD" featureNameKey="LAD24NM" />
  <Legend formatValue={(v) => v.toLocaleString()} />
</Chart>

Props

LegendItem