> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# onLegendReady

> Get the legend items of a chart through the onLegendReady callback so you can render a fully custom legend.

API reference: [OnLegendReady](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.onlegendready/index.md) (type-alias), [ILegendData](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ilegenddata/index.md) (interface)

The `onLegendReady` callback gives you the legend items of a chart so that you can render your own legend, for example outside the chart container, as a sidebar table, or shared by several charts. It's available on the chart components from `@gooddata/sdk-ui-charts` (the [`IChartCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartcallbacks/index.md) interface); [`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.insightview/index.md), [`PivotTable`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-pivot/sdk-ui-pivot.pivottable/index.md), and [`Kpi`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.kpi/index.md) don't offer it.

## [Structure](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/on-legend-ready/#structure)

```ts
onLegendReady?: (data: ILegendData) => void;
```

The callback receives an [`ILegendData`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ilegenddata/index.md) object:

```ts
{
    legendItems: [
        {
            name: "Revenue", // the name of the series
            color: "#14b2e2", // a CSS color string, usable directly in styles
            onClick: () => {}, // toggles show/hide for the series in the chart
        },
    ],
}
```

## [Example](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/on-legend-ready/#example)

```tsx
import { useState } from "react";
import { ColumnChart, type ILegendItem } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

export function ChartWithCustomLegend() {
    const [legendItems, setLegendItems] = useState<ILegendItem[]>([]);

    return (
        <>
            <ul>
                {legendItems.map((item) => (
                    <li key={item.name} onClick={item.onClick} style={{ color: item.color }}>
                        {item.name}
                    </li>
                ))}
            </ul>
            <ColumnChart
                measures={[Md.$TotalSales]}
                viewBy={Md.LocationState}
                stackBy={Md.LocationCity}
                config={{
                    legend: {
                        enabled: false, // disable the original legend implementation
                    },
                }}
                onLegendReady={(legendData) => setLegendItems(legendData.legendItems)}
            />
        </>
    );
}
```

## [Notes](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/interactivity/on-legend-ready/#notes)

- Disable the built-in legend with `config.legend.enabled = false`; otherwise both legends render.
- The callback fires once the chart has rendered its series, and again whenever the legend items change, for example after new data arrives.
- Each item's `onClick` toggles the visibility of its series in the chart, so you don't need to implement show and hide yourself. The `legendItems` array doesn't change when you click; keep the hidden or shown state in your own component state to keep your legend in sync.
- The `color` values follow the active color palette or the explicit `colorMapping`, so keep your legend palette-aware if you allow theme switching.