Skip to content

PiecewiseColorLegend API

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

Demos

Import

import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
// or
import { PiecewiseColorLegend } from '@mui/x-charts';
// or
import { PiecewiseColorLegend } 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.

axisDirection'x'
| 'y'
| 'z'
'z'

The axis direction containing the color configuration to represent.

axisIdnumber
| string
The first axis item.

The id of the axis item with the color configuration to represent.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

hideFirstboolfalse

Hide the first item of the legend, corresponding to the [-infinity, min] piece.

hideLastboolfalse

Hide the last item of the legend, corresponding to the [max, +infinity] piece.

itemGapnumber10

Space between two legend items (in px).

itemMarkHeightnumber20

Height of the item mark (in px).

itemMarkWidthnumber20

Width of the item mark (in px).

labelFormatterfunc-

Format the legend labels.

Signature:function(params: PiecewiseLabelFormatterParams) => string | null
  • params The bound of the piece to format.

Returns: The displayed label, or null to skip the item.

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: PiecewiseColorLegendItemContext, 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
.MuiPiecewiseColorLegend-columncolumnStyles applied to the legend with column layout.
.MuiPiecewiseColorLegend-itemBackgrounditemBackgroundStyles applied to the item background.
.MuiPiecewiseColorLegend-labellabelStyles applied to the series label.
.MuiPiecewiseColorLegend-markmarkStyles applied to series mark element.
.MuiPiecewiseColorLegend-rootrootStyles applied to the root element.
.MuiPiecewiseColorLegend-rowrowStyles applied to the legend with row layout.
.MuiPiecewiseColorLegend-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.