Skip to content

HeatmapSeries API

Extended documentation for the HeatmapSeries interface with detailed information on the module's properties and available APIs.

Demos

Import

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

Properties

Type:'heatmap'


Optional

Data associated to each cell in the heatmap. Each entry is a tuple [xIndex, yIndex, value].

Type:readonly HeatmapValueType[]


Optional

The key used to retrieve data from the dataset.

Type:string


Optional

The scope to apply when the series is highlighted.

Type:{ highlight?: 'item' | 'none' | 'series', fade?: 'global' | 'none' | 'series' }


Optional

The id of this series.

Type:string


Optional

The label to display on the tooltip or the legend. It can be a string or a function.

Type:(location: 'legend' | 'tooltip') => string | string


Optional

Defines the mark type for the series. There is a default mark type for each series type.

Type:'circle' | 'line' | 'line+mark' | 'square' | ComponentClass<ChartsLabelCustomMarkProps, any> | FunctionComponent<ChartsLabelCustomMarkProps>


Optional

Function that formats values to be displayed in a tooltip.

Type:(value: number, context: { xIndex: number, yIndex: number }) => string


Optional

A function to extract and transform the value from the `dataset` item. It receives the full dataset item and should return a heatmap value. Can be used as an alternative to `dataKey`.

Type:(item: DatasetElementType<unknown>) => HeatmapValueType


Optional

The id of the x-axis used to render the series.

Type:number | string


Optional

The id of the y-axis used to render the series.

Type:number | string