0|

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

import { BeeLineChart, Line, XAxis, Legend, Tooltip } from "@beecharts/line-chart";
 
<BeeLineChart data={data} config={chartConfig} xDataKey="month" className="h-full w-full p-4">
  <XAxis dataKey="month" />
  <Legend variant="circle" isClickable />
  <Tooltip />
  <Line dataKey="desktop" />
  <Line dataKey="mobile" />
</BeeLineChart>

Variants

Control the legend indicator style with the variant prop on <Legend />.

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

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar"rounded-square"

On <Legend /> — controls the marker shape next to each series label.

hideLegendbooleanfalse

When true, hides the legend entirely.

hideIconbooleanfalse

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

alignleft|center|right"right"

Controls the horizontal alignment of the legend items.