---
id: "packages/active-charts/all-exports/use-chart-legend"
title: "useChartLegend"
description: "useChartLegend: generated from the source of active-charts."
url: "/packages/active-charts/all-exports/use-chart-legend"
locale: "en"
revision: "g0mvjxwj5c-88bdbe1c:use-chart-legend"
---

# useChartLegend

Exported by `@workspace/active-charts`. Generated from the package source; part of [the index of every export](/packages/active-charts/all-exports).

## Functions, hooks and constants

**useChartLegend**: `() => ChartLegend`

The headless legend of one chart (AF-B, ADR-105): the chart's resolved
discrete legend (identity, label, key, visibility, available actions) and
the chart's own legend actions, for a legend the host renders itself.
Give `link` to exactly one chart as `legendLink`; until that chart has
mounted (and on the server) `entries` is empty and `connected` false.

The chart keeps its semantics on every route: the action is announced in
the chart's live region, reported once through `onLegendChange`
(`source: 'api'`), and guarded as the built-in legend is. The host owns
the markup, roles, names and focus of its own legend.

```tsx
const legend = useChartLegend();
<PieChart legend={false} legendLink={legend.link} … />
{legend.entries.map((entry) => (
<button key={entry.id} aria-pressed={entry.visible}
disabled={!entry.available.toggle}
onClick={() => legend.activate(entry.id)}>{entry.label}</button>
))}
```

Returns an object with:

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `entries` | `readonly ChartLegendEntry[]` | yes | The legend's entries in reading order; empty until a chart is connected. |
| `connected` | `boolean` | yes | A chart has received `link` and published its legend. |
| `activate` | `(entryId: string, action?: ChartLegendAction) => boolean` | yes | The chart's own legend action on one entry (default `'toggle'`). Returns whether anything changed: an unknown id, a disconnected link, `legend.interactive: false`, isolation with `legend.isolate: false` and hiding the last visible target change nothing. |
| `showAll` | `() => boolean` | yes | "Show all". Returns whether anything changed. |
| `link` | `ChartLegendLink` | yes | Give it to exactly one chart as `legendLink`. |