DefaultChartsItemTooltipContent API
API reference docs for the React DefaultChartsItemTooltipContent component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import { DefaultChartsItemTooltipContent } from '@mui/x-charts/ChartsTooltip';
// or
import { DefaultChartsItemTooltipContent } from '@mui/x-charts';Override or extend the styles applied to the component.
See CSS API below for more details.
Type:object
The data used to identify the triggered item.
Type:{ dataIndex?: number, seriesId: number
| string, type: 'bar'
| 'line'
| 'pie'
| 'scatter' }
The series linked to the triggered axis.
Type:{ color?: string, data: Array<number>
| Array<number>
| Array<{ id: number
| string, x: number, y: number }>
| Array<{ color: string, endAngle: number, formattedValue: string, id: number
| string, index: number, label?: string, padAngle: number, startAngle: number, value: number }>, highlightScope?: { faded?: 'global'
| 'none'
| 'series', highlighted?: 'item'
| 'none'
| 'series' }, id: number
| string, type: 'bar'
| 'line'
| 'pie'
| 'scatter', valueFormatter: func }
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Styles applied to the labelCell element.
Rule name:labelCell
Styles applied to the markCell element.
Rule name:markCell
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.