||

Legend

Documentation Index

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

Display chart legends to identify different data series in your visualizations

Usage

 
<EvilLineChart
  xDataKey="month"
  data={data}
  chartConfig={chartConfig}
  legendVariant="circle" | "square" | "circle-outline" // and so on
/>

Variants

Control the legend indicator style with the legendVariant prop.

Square

legendVariant='square'

Circle

legendVariant='circle'

Circle Outline

legendVariant='circle-outline'

Rounded Square (Default)

legendVariant='rounded-square'

Rounded Square Outline

legendVariant='rounded-square-outline'

Vertical Bar

legendVariant='vertical-bar'

Horizontal Bar

legendVariant='horizontal-bar'

API Reference
legendVariant

Controls the style of the legend indicator icon.

type: "square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | "vertical-bar" | "horizontal-bar"

default: "rounded-square"

hideLegend

When true, hides the legend entirely.

type: boolean

default: false

hideIcon

When true, hides the color indicator icon next to each legend item. Only the label text is shown.

type: boolean

default: false

align

Controls the horizontal alignment of the legend items.

type: "left" | "center" | "right"

default: "right"

Did you like the content?