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.
| Name | Type | Default | Description |
|---|---|---|---|
| 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. |
| classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
| itemGap | number | 10 | Space between two legend items (in px). |
| itemMarkHeight | number | 20 | Height of the item mark (in px). |
| itemMarkWidth | number | 20 | Width of the item mark (in px). |
| labelStyle | object | theme.typography.subtitle1 | Style applied to legend labels. |
| markGap | number | 5 | Space between the mark and the label (in px). |
| padding | number | { 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. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Rule name | Description |
|---|---|---|
| .MuiDefaultChartsLegend-mark | mark | |
| .MuiDefaultChartsLegend-root | root | |
| .MuiDefaultChartsLegend-series | series |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.