useLegend

Get formatted legend data to build custom legend components.

The useLegend() hook returns formatted legend data for building custom legend components.

Usage

import { useLegend } from '@mui/x-charts/hooks';

function CustomLegend() {
  const { items } = useLegend();
  // items: Array of legend items with id, label, color, markType
}

Return value

useLegend() returns an object with the following structure:

{
  items: LegendItemParams[]
}

The LegendItemParams interface defines the structure of each legend item.

Caveats

You can only use this hook within a chart context. See the hooks overview for usage requirements.