# Legend

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

> For the complete documentation index, see [llms.txt](/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](/.well-known/agent-skills/site-skill.md).





## Usage [#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.

```tsx
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 [#variants]

Control the legend indicator with the `variant` prop.

### Square [#square]

<ComponentPreview base="pixijs" name="chart-ui-variants-demo" title="variant='square'">
  <PixijsLegendVariantDemo variant="square" />
</ComponentPreview>

### Circle [#circle]

<ComponentPreview base="pixijs" name="chart-ui-variants-demo" title="variant='circle'">
  <PixijsLegendVariantDemo variant="circle" />
</ComponentPreview>

### Circle Outline [#circle-outline]

<ComponentPreview base="pixijs" name="chart-ui-variants-demo" title="variant='circle-outline'">
  <PixijsLegendVariantDemo variant="circle-outline" />
</ComponentPreview>

### Rounded Square (Default) [#rounded-square-default]

<ComponentPreview base="pixijs" name="chart-ui-variants-demo" title="variant='rounded-square'">
  <PixijsLegendVariantDemo />
</ComponentPreview>

### Rounded Square Outline [#rounded-square-outline]

<ComponentPreview base="pixijs" name="chart-ui-variants-demo" title="variant='rounded-square-outline'">
  <PixijsLegendVariantDemo variant="rounded-square-outline" />
</ComponentPreview>

### Vertical Bar [#vertical-bar]

<ComponentPreview base="pixijs" name="chart-ui-variants-demo" title="variant='vertical-bar'">
  <PixijsLegendVariantDemo variant="vertical-bar" />
</ComponentPreview>

### Horizontal Bar [#horizontal-bar]

<ComponentPreview base="pixijs" name="chart-ui-variants-demo" title="variant='horizontal-bar'">
  <PixijsLegendVariantDemo variant="horizontal-bar" />
</ComponentPreview>

## API Reference [#api-reference]

| Prop       | Type                                                                                                                             | Default            | Description                                 |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------- |
| `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.            |
| `hideIcon` | `boolean`                                                                                                                        | `false`            | Hides the indicator while retaining labels. |