ChartsAxisHighlightValue API

API reference docs for the React ChartsAxisHighlightValue 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 - Highlighting

Import

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

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

A component that displays the axis value at the edge of the drawing area, aligned with the current axis highlight position.

Renders as a portal into the ChartsLayerContainer, appearing as the last child.

Props

Name	Type	Default	Description
axisDirection*	'x' \| 'y'	-	The axis direction.
axisId	number \| string	-	The id of the axis. If not provided, defaults to the first axis.
labelPosition	'both' \| 'end' \| 'none' \| 'start'	'end'	The position of the label relative to the drawing area. - `'start'`: at the beginning of the drawing area (top for x-axis, left for y-axis). - `'end'`: at the end of the drawing area (bottom for x-axis, right for y-axis). - `'both'`: at both positions. - `'none'`: no label is displayed.
value	Date \| number \| string	-	The value to display. If not defined, tracks the axis highlight value from user interaction.
valueFormatter	func	-	A function to format the displayed value. If not provided, uses the axis `valueFormatter`, or falls back to a default formatter. Signature:`function(value: number \| Date \| string) => string` `value` The value to format.

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.