Legend

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"