||

Legend

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Legends that identify each data series in our charts.

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.

import { LineChart } from "honestui/charts";

<LineChart data={data} config={chartConfig} xDataKey="month">
  <LineChart.Legend variant="circle" isClickable />
  <LineChart.Line dataKey="desktop" />
  <LineChart.Line dataKey="mobile" />
</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.