Skip to content

DefaultChartsAxisTooltipContent API

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

Component demos

Import

import { DefaultChartsAxisTooltipContent } from '@mui/x-charts/ChartsTooltip';
// or
import { DefaultChartsAxisTooltipContent } from '@mui/x-charts';
Learn about the difference by reading this guide on minimizing bundle size.

Props

axisRequired

The properties of the triggered axis.

Type:{ axisId?: string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id: string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', scale: func, scaleType: 'time', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber: number, tickSize?: number, valueFormatter?: func }

axisDataRequired

Data identifying the triggered axis.

Type:{ x?: { index?: number, value: Date
| number }, y?: { index?: number, value: Date
| number } }

axisValueRequired

The value associated to the current mouse position.

Type:any

classesRequired

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:object

seriesRequired

The series linked to the triggered axis.

Type:Array<{ area?: bool, color: string, connectNulls?: bool, curve?: 'catmullRom'
| 'linear'
| 'monotoneX'
| 'monotoneY'
| 'natural'
| 'step'
| 'stepAfter'
| 'stepBefore', data: Array<number>, dataKey?: string, disableHighlight?: bool, highlightScope?: { faded?: 'global'
| 'none'
| 'series', highlighted?: 'item'
| 'none'
| 'series' }, id: string, label?: string, showMark?: func
| bool, stack?: string, stackOffset?: 'diverging'
| 'expand'
| 'none'
| 'silhouette'
| 'wiggle', stackOrder?: 'appearance'
| 'ascending'
| 'descending'
| 'insideOut'
| 'none'
| 'reverse', type: 'line', valueFormatter: func, xAxisKey?: string, yAxisKey?: string }>

dataIndex

The index of the data item triggered.

Type:number

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.

.MuiDefaultChartsAxisTooltipContent-cell

Styles applied to the cell element.

Rule name:cell

.MuiDefaultChartsAxisTooltipContent-labelCell

Styles applied to the labelCell element.

Rule name:labelCell

.MuiDefaultChartsAxisTooltipContent-mark

Styles applied to the mark element.

Rule name:mark

.MuiDefaultChartsAxisTooltipContent-markCell

Styles applied to the markCell element.

Rule name:markCell

.MuiDefaultChartsAxisTooltipContent-root

Styles applied to the root element.

Rule name:root

.MuiDefaultChartsAxisTooltipContent-row

Styles applied to the row element.

Rule name:row

.MuiDefaultChartsAxisTooltipContent-table

Styles applied to the table element.

Rule name:table

.MuiDefaultChartsAxisTooltipContent-valueCell

Styles applied to the valueCell element.

Rule name:valueCell


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