Skip to documentation content
|

Legend

Identify each chart series and optionally control pointer selection.

Usage

Compose the legend as a child of the chart root. Pass variant to control the indicator style, and isClickable to let each entry toggle selection of its series. Canvas legend selection is pointer-operated, so use an external keyboard-operable control if changing the selected series is required.

import { LineChart } from "honestui/charts";

<LineChart data={data} config={chartConfig} xDataKey="month">
  <LineChart.Legend variant="circle" isClickable />
  <LineChart.Line dataKey="highTemp" />
  <LineChart.Line dataKey="lowTemp" />
</LineChart>

Variants

Control the legend indicator style with the variant prop on <LineChart.Legend />.

Square

variant='square'

Circle

variant='circle'

Circle Outline

variant='circle-outline'

Rounded Square (Default)

variant='rounded-square'

Rounded Square Outline

variant='rounded-square-outline'

Vertical Bar

variant='vertical-bar'

Horizontal Bar

variant='horizontal-bar'

API Reference

Props for the <LineChart.Legend /> part.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar"rounded-square"

Style of the legend indicator icon.

alignleft|center|right"right"

Horizontal placement of the legend items.

verticalAligntop|middle|bottom"top"

Vertical placement of the legend items.

isClickablebooleanfalse

When enabled, clicking an entry toggles selection of its series.