Skip to content
+

Charts - Legend

Legend is the UI element mapping symbols and colors to the series' label.

Basic display

In chart components, the legend links series with label properties and their color.

−20−15−10−505101520−20−1001020
Press Enter to start editing

Customization

Position

The legend can either be displayed in a 'column' or 'row' layout controlled with the direction property.

It can also be moved with the position: { vertical, horizontal } property which defines how the legend aligns within the SVG.

  • vertical can be 'top', 'middle', or 'bottom'.
  • horizontal can be 'left', 'middle', or 'right'.

You can add spacing to a given position with the padding property, which can be either a number or an object { top, bottom, left, right }. This padding will add space between the SVG borders and the legend.

By default, the legend is placed above the charts.

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

<PieChart
  margin={{ top: 100, bottom: 100, left: 100, right:100 }}
  {/** ... */}
  slotProps={{
    legend: {
      direction: 'undefined',
      position: { vertical: 'undefined', horizontal: 'undefined' },
      padding: undefined,
    },
  }}
/>

Playground

Hiding

You can hide the legend with the property slotProps.legend.hidden.

Press Enter to start editing

Dimensions

Inside the legend, you can customize the pixel value of the width and height of the mark with the itemMarkWidth and itemMarkHeight props.

You can also access the markGap prop to change the gap between the mark and its label, or the itemGap to change the gap between two legend items. Both props impact the values defined in pixels.

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

<PieChart
  margin={{ top: 100, bottom: 10, left: 10, right:100 }}
  {/** ... */}
  slotProps={{
    legend: {
      direction: props.direction,
      position: {
        vertical: 'middle',
        horizontal: 'right',
      },
      itemMarkWidth: undefined,
      itemMarkHeight: undefined,
      markGap: undefined,
      itemGap: undefined,
    }
  }}
/>

Playground

Label styling

To break lines in legend labels, use the special \n character. To customize the label style, you should not use CSS. Instead, pass a styling object to the labelStyle property.

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

<PieChart
  margin={{ top: 100, bottom: 10, left: 10, right:100 }}
  {/** ... */}
  series={[
    { ..., label: 'series A'}
    ...
  ]}
  slotProps={{
    legend: {
      labelStyle: {
        fontSize: undefined,
        fill: 'undefined',
      },
    },
  }}
/>

Playground

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.