Legend

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} 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

Circle

Circle Outline

Rounded Square (Default)

Rounded Square Outline

Vertical Bar

Horizontal Bar

API Reference

Props for the <EChartsLineChart.Legend /> part.

Prop	Type	Default	Description
variant	square\| circle\| circle-outline\| rounded-square\| rounded-square-outline\| vertical-bar\| horizontal-bar	"rounded-square"	Style of the legend indicator icon.
align	left\| center\| right	"right"	Horizontal placement of the legend items.
verticalAlign	top\| middle\| bottom	"top"	Vertical placement of the legend items.
isClickable	boolean	false	When enabled, clicking an entry toggles selection of its series.

Was this page helpful?

Tooltip Tooltips that surface the values under the pointer as you hover a chart.

Dots Point markers for line, area, and composed charts.

On This Page

Usage Variants Square Circle Circle Outline Rounded Square (Default)Rounded Square Outline Vertical Bar Horizontal Bar API Reference