useLegend

Access formatted legend data for creating custom legend components.

The useLegend hook provides access to formatted legend data that can be used to create 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

The hook returns an object with the following structure:

{
  items: LegendItemParams[]
}

The LegendItemParams interface defines the structure of each legend item.

Caveats

This hook must be used within a chart context. See the hooks overview for more information about proper usage.