Skip to content

ChartsLegend API

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

Component demos

Import

import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
// or
import { ChartsLegend } from '@mui/x-charts';
Learn about the difference by reading this guide on minimizing bundle size.

Props

classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:object

direction

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

Type:'column'
| 'row'

hidden

Set to true to hide the legend.

Type:bool

slotProps

The props used for each component slot.

Type:object

Default:{}

slots

Overridable component slots.

Type:object

Default:{}

The component cannot hold a ref.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiChartsLegend-root

Styles applied to the root element.

Rule name:root

.MuiChartsLegend-series

Styles applied to a series element.

Rule name:series

.MuiChartsLegend-mark

Styles applied to series mark element.

Rule name:mark

.MuiChartsLegend-label

Styles applied to the series label.

Rule name:label

.MuiChartsLegend-column

Styles applied to the legend with column layout.

Rule name:column

.MuiChartsLegend-row

Styles applied to the legend with row layout.

Rule name:row


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

Slots

legend