Legend

Chart legends for identifying data series. DiscreteLegend for categorical series; SequentialLegend for continuous color scales.

Import

import {
  DiscreteLegend,
  DiscreteLegendEntry,
  DiscreteLegendSymbol,
  SequentialLegend
} from 'reaviz';

DiscreteLegend Props

DiscreteLegendEntry Props

DiscreteLegendSymbol Props

SequentialLegend Props

Discrete Legend

<DiscreteLegend
  orientation="horizontal"
  entries={[
    <DiscreteLegendEntry label="Series A" color="#2d60e8" />,
    <DiscreteLegendEntry label="Series B" color="#26efb5" />,
    <DiscreteLegendEntry label="Series C" color="#ff5722" />,
  ]}
/>

Vertical Legend

<DiscreteLegend
  orientation="vertical"
  entries={[
    <DiscreteLegendEntry label="Revenue" color="#2d60e8" />,
    <DiscreteLegendEntry label="Costs" color="#ff5722" />,
  ]}
/>

Interactive Legend (Toggle Series)

const [active, setActive] = useState(['A', 'B']);

<DiscreteLegend
  entries={series.map((s) => (
    <DiscreteLegendEntry
      key={s.key}
      label={s.key}
      color={s.color}
      style={{ opacity: active.includes(s.key) ? 1 : 0.3 }}
      onClick={() =>
        setActive((prev) =>
          prev.includes(s.key)
            ? prev.filter((k) => k !== s.key)
            : [...prev, s.key]
        )
      }
    />
  ))}
/>

Sequential Legend (Heatmap)

<SequentialLegend
  data={heatmapData}
  colorScheme={['#f0f9e8', '#08589e']}
  orientation="vertical"
/>

Horizontal Sequential Legend

<SequentialLegend
  data={data}
  orientation="horizontal"
  colorScheme={['rgba(28,107,86,0.5)', '#2da283']}
/>

Notes

• Legends are not automatically rendered by charts — add them alongside your chart component
• DiscreteLegend renders HTML elements (not SVG), so place it outside the chart SVG
• SequentialLegend renders a gradient bar with min/max labels from the data extent