# ChartLegend

> Series legend.

Source: https://ui.jcsoftdev.com/docs/components/chart-legend

Series legend. Each item is a toggle button (`aria-pressed`), so hiding a
series works with mouse, touch and keyboard; hovering or focusing one dims
the rest of the chart.

## Import

```ts
import { ChartLegend } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/core`.

## Usage

```tsx
<ChartLegend items={items} align="start" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` * | `readonly LegendItem[]` |  |  |
| `onToggle` | `((id: string) => void)` |  | Click toggles a series. Omit for a read-only legend. |
| `onHighlight` | `((id: string \| null) => void)` |  | Hover or focus of an item, `null` when leaving: used to dim the other series. |
| `align` | `"center" \| "start" \| "end"` | `"start"` |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Read Only](/storybook/?path=/story/charts-primitives-chartlegend--read-only)
- [Toggleable](/storybook/?path=/story/charts-primitives-chartlegend--toggleable)
- [Centered](/storybook/?path=/story/charts-primitives-chartlegend--centered)

## Source

`packages/ui/src/charts/core/legend.tsx`