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).

onItemClickfunc-

Callback fired when a legend item is clicked.

Signature:function(event: React.MouseEvent, legendItem: SeriesLegendItemContext, index: number) => void
  • event The click event.
  • legendItem The legend item data.
  • index The index of the clicked legend item.
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-columncolumnStyles applied to the legend with column layout.
.MuiDefaultChartsLegend-itemBackgrounditemBackgroundStyles applied to the item background.
.MuiDefaultChartsLegend-labellabelStyles applied to the series label.
.MuiDefaultChartsLegend-markmarkStyles applied to series mark element.
.MuiDefaultChartsLegend-rootrootStyles applied to the root element.
.MuiDefaultChartsLegend-rowrowStyles applied to the legend with row layout.
.MuiDefaultChartsLegend-seriesseriesStyles applied to a series element.

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

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.