ContinuousColorLegend API

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

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Charts - Legend

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

Name	Type	Default	Description
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.
axisId	number \| 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.
id	string	auto-generated id	A unique identifier for the gradient.
labelStyle	object	theme.typography.subtitle1	The style applied to labels.
length	number \| 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.
maxLabel	func \| 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.
minLabel	func \| 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.
spacing	number	4	The space between the gradient bar and the labels.
thickness	number	5	The thickness of the gradient bar.

The component cannot hold a ref.

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.