Skip to content
Edit this page
+

Charts - Legend

Legend is the UI element mapping symbols and colors to the series' label.

Basic display

In chart components, the legend links series with label properties and their color.

−20−15−10−505101520−20−1001020var Avar B
Press Enter to start editing

Placement

The legend can either be displayed in a 'column' or 'row' layout controlled with the direction property.

It can also be moved by a combination of position: { vertical, horizontal } properties and the legend offset values. The position places the legend just next to the drawing area, and offset values move it relative to this base position.

  • vertical can be 'top', 'middle', or 'bottom'.
  • horizontal can be 'left', 'middle', or 'right'.
  • offsets are set with CSS variables --ChartsLegend-rootOffsetX and --ChartsLegend-rootOffsetY.

Defaults are such that the legend is placed on top of the charts.

−20−1001020−20−1001020var Avar B
import { ScatterChart } from '@mui/x-charts/ScatterChart';

<ScatterChart
  margin={{ top: 70, bottom: 70, left: 100, right:100 }}
  {/** ... */}
  legend={{
    directon: "undefined"
    position: {
      vertical: "undefined",
      horizontal: "undefined"
    }
  }}
  sx={{
  }}
/>

Playground

Dimensions

The dimension of the legend is defined by some CSS variables:

  • --ChartsLegend-itemWidth: The width of one series (including the mark and the label).
  • --ChartsLegend-itemMarkSize: The size of the mark square.
  • --ChartsLegend-labelSpacing: The space between the mark and the label.
  • --ChartsLegend-rootSpacing: The space between two series.
−20−15−10−505101520−20−1001020var Avar B
import { ScatterChart } from '@mui/x-charts/ScatterChart';

<ScatterChart
  {/** ... */}
  legend={{
    directon: "undefined"
  }}
  sx={{
  }}
/>

Playground