Svelte 5 port
| |

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 a chart.

Usage

 
<EvilLineChart {data} config={chartConfig}>
	<EvilLineChart.XAxis dataKey="month" />
	<EvilLineChart.Legend variant="circle" />
	<EvilLineChart.Line dataKey="desktop" />
</EvilLineChart>

Variants

Set the variant prop on the chart’s Legend part. The API reference lists every available value.

Square

Circle

Circle outline

Rounded square (default)

Rounded square outline

Vertical bar

Horizontal bar

API reference
PropTypeDefaultDescription
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 alignment of the legend items.

verticalAlign top| middle| bottom"top"

Places the legend above, within, or below the plot.

isClickablebooleanfalse

Lets each legend item toggle its series selection.

Was this page helpful?