Skip to content

DefaultChartsLegend API

API reference docs for the React DefaultChartsLegend component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import { DefaultChartsLegend } from '@mui/x-charts/ChartsLegend';
// or
import { DefaultChartsLegend } from '@mui/x-charts';
// or
import { DefaultChartsLegend } from '@mui/x-charts-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
direction*'column'
| 'row'
-

The direction of the legend layout. The default depends on the chart.

position*{ horizontal: 'left'
| 'middle'
| 'right', vertical: 'bottom'
| 'middle'
| 'top' }
-

The position of the legend.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

hiddenboolfalse

Set to true to hide the legend.

itemGapnumber10

Space between two legend items (in px).

itemMarkHeightnumber20

Height of the item mark (in px).

itemMarkWidthnumber20

Width of the item mark (in px).

labelStyleobjecttheme.typography.subtitle1

Style applied to legend labels.

markGapnumber5

Space between the mark and the label (in px).

paddingnumber
| { bottom?: number, left?: number, right?: number, top?: number }
10

Legend padding (in px). Can either be a single number, or an object with top, left, bottom, right properties.

The component cannot hold a ref.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class nameRule nameDescription
.MuiDefaultChartsLegend-markmark
.MuiDefaultChartsLegend-rootroot
.MuiDefaultChartsLegend-seriesseries

You can override the style of the component using one of these customization options: