Legend

"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { BarSeries, LineSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { Legend } from "@reincharts/tooltip";
import { weather, type WeatherDay } from "@/lib/data-general";
import { useDocsChartTheme } from "@/lib/use-docs-theme";

export default function LegendExample() {
    const theme = useDocsChartTheme();
    return (
        <ChartCanvas data={weather} theme={theme} barSpacing={6}>
            <Pane size={3}>
                <Grid />
                <LineSeries<WeatherDay> name="High" y="high" color="#f97316" width={1.5} />
                <LineSeries<WeatherDay> name="Mean" y="temp" width={2} />
                <LineSeries<WeatherDay> name="Low" y="low" color="#06b6d4" width={1.5} />
                <YAxis tickFormat={(t) => `${t.label}°`} />
                {/* values follow the crosshair; click an item to hide its series */}
                <Legend />
            </Pane>
            <Pane>
                <Grid />
                <BarSeries<WeatherDay>
                    name="Anomaly"
                    y="anomaly"
                    fill={(d) => (d.anomaly >= 0 ? "#f97316" : "#06b6d4")}
                />
                <YAxis />
                <Legend />
            </Pane>
            <XAxis />
            <Crosshair />
        </ChartCanvas>
    );
}

UsageCopy Anchor Link

Put a <Legend> inside each <Pane>. It lists every series and indicator of the pane with its values at the crosshair (or the last bar when the pointer is outside the chart).

<Pane>
  <LineSeries name="High" y="high" />
  <LineSeries name="Mean" y="temp" />
  <Legend />
</Pane>

• title replaces the first series' name (the symbol row) and turns on showChange (change and change % vs the previous bar).
• Click an item to hide its series; hidden series leave the autoscale too. Turn it off with toggleOnClick={false}.
• orientation="horizontal" lays items out in a row, handy for general charts; swatch adds color dots; showValues={false} shows names only.
• filter, items (custom items) and renderItem customise the content.

Compact modeCopy Anchor Link

On small charts a full legend would cover the data. With compact (default "auto", which turns it on when the pane is narrower than 480px) the first item shows only its name and current value, and the other items collapse into an "N more" button with their colors; clicking it expands them into a row of clickable chips. Force it with compact={true}, or turn it off with compact={false}.

<Legend compact />

Resize the browser window below 480px on any example to see it, or try the compact legend example.

Item actionsCopy Anchor Link

actions renders extra controls after each item (eye / settings / remove buttons). It receives the item and a context with toggle(), the shown index and the hover state.

See the legend actions example →

Custom legendsCopy Anchor Link

useLegend(paneId) returns what <Legend> renders: the shown data index, whether it comes from the crosshair (hovered), and one entry per series with its name, color, formatted values and hidden flag. Use it inside the chart to build your own legend markup, for example in a <ChartOverlay>; toggle a series with engine.setHidden(item.id).

function ValueChips() {
  const engine = useChart();
  const { entries } = useLegend(usePaneId());
  return (
    <ChartOverlay>
      {entries.map(({ item }) => (
        <button
          key={item.id}
          onClick={() => engine.setHidden(item.id)}
          style={{ color: item.color, pointerEvents: "auto" }}
        >
          {item.name} {item.values[0]?.value}
        </button>
      ))}
    </ChartOverlay>
  );
}

See the custom legend example →