Skip to content

ContinuousColorLegend API

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

Demos

Import

import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
// or
import { ContinuousColorLegend } from '@mui/x-charts';
// or
import { ContinuousColorLegend } from '@mui/x-charts-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
align'end'
| 'middle'
| 'start'
'middle'

The alignment of the texts with the gradient bar.

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.

direction'column'
| 'row'
-

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

idstringauto-generated id

A unique identifier for the gradient.

labelStyleobjecttheme.typography.subtitle1

The style applied to labels.

lengthnumber
| string
'50%'

The length of the gradient bar. Can be a number (in px) or a string with a percentage such as '50%'. The '100%' is the length of the svg.

maxLabelfunc
| string
({ formattedValue }) => formattedValue

The label to display at the maximum side of the gradient. Can either be a string, or a function. If not defined, the formatted maximal value is display.

minLabelfunc
| string
({ formattedValue }) => formattedValue

The label to display at the minimum side of the gradient. Can either be a string, or a function.

position{ horizontal: 'left'
| 'middle'
| 'right', vertical: 'bottom'
| 'middle'
| 'top' }
-

The position of the legend.

scaleType'linear'
| 'log'
| 'pow'
| 'sqrt'
| 'time'
| 'utc'
'linear'

The scale used to display gradient colors.

spacingnumber4

The space between the gradient bar and the labels.

thicknessnumber5

The thickness of the gradient bar.

The component cannot hold a ref.