||

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 an ECharts chart.

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.

<EChartsLineChart data={data} config={chartConfig} xDataKey="month">
  <EChartsLineChart.Legend variant="circle" isClickable />
  <EChartsLineChart.Line dataKey="desktop" />
  <EChartsLineChart.Line dataKey="mobile" />
</EChartsLineChart>

Variants

Control the legend indicator style with the variant prop on <EChartsLineChart.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 <EChartsLineChart.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.

Did you like the content?