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.
| 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. |