For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Legend

PreviousNext

Legends that identify and focus each data series in a chart.

ChartGPUPixiJS
ChartGPU renderer

Usage

Compose <Legend /> inside the chart root. Its entries read their labels, icons, and colors from ChartConfig. Select an entry to focus its series and select it again to clear the focus.

import { ChartcnLineChart } from "@/components/chart/line-chart";
 
<ChartcnLineChart data={data} config={chartConfig} xDataKey="month">
  <ChartcnLineChart.Legend variant="circle" align="right" />
  <ChartcnLineChart.Line dataKey="desktop" />
  <ChartcnLineChart.Line dataKey="mobile" />
</ChartcnLineChart>;

Variants

Control the legend indicator with the variant prop.

Square

variant='square'

Circle

variant='circle'

Circle Outline

variant='circle-outline'

Rounded Square (Default)

variant='rounded-square'

Rounded Square Outline

variant='rounded-square-outline'

Vertical Bar

variant='vertical-bar'

Horizontal Bar

variant='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.
align"left" | "center" | "right""right"Horizontal alignment of the legend entries.
position"top" | "right" | "bottom" | "left""top"Placement around the chart plot.
hideIconbooleanfalseHides the indicator while retaining labels.