Skip to content

ChartsReferenceLine API

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

Demos

Import

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

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

Props

NameTypeDefaultDescription
axisIdnumber
| string
The `id` of the first defined axis.

The id of the axis used for the reference value.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

labelstring-

The label to display along the reference line.

labelAlign'end'
| 'middle'
| 'start'
'middle'

The alignment if the label is in the chart drawing area.

labelStyleobject-

The style applied to the label.

lineStyleobject-

The style applied to the line.

spacingnumber
| { x?: number, y?: number }
5

Additional space around the label in px. Can be a number or an object { x, y } to distinguish space with the reference line and space with axes.

xDate
| number
| string
-

The x value associated with the reference line. If defined the reference line will be vertical.

yDate
| number
| string
-

The y value associated with the reference line. If defined the reference line will be horizontal.

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
.MuiChartsReferenceLine-horizontalhorizontalStyles applied to the root element if the reference line is horizontal.
.MuiChartsReferenceLine-labellabelStyles applied to the reference label.
.MuiChartsReferenceLine-linelineStyles applied to the reference line.
.MuiChartsReferenceLine-rootrootStyles applied to the root element.
.MuiChartsReferenceLine-verticalverticalStyles applied to the root element if the reference line is vertical.

You can override the style of the component using one of these customization options: