Charts - Heatmap

Heatmap charts visually represents data with color variations to highlight patterns and trends across two dimensions.

Basics

Heatmap charts series must contain a data property containing an array of 3-tuples. The first two numbers in each tuple correspond to the x and y indexes of the cell, respectively. The third number is the value for the given cell.

series={[{
    data: [
        [0, 2, 2.7], // Cell (0, 2) receives the value 2.7
        [1, 2, 4.5], // Cell (1, 2) receives the value 4.5
    ]
}]}

You can specify x and y ticks with the xAxis and yAxis props.

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data }]}
  height={300}
/>

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data }]}
  height={300}
/>

Press Enter to start editing

Customization

Color mapping

To customize the color mapping, use the zAxis configuration. You can either use the piecewise or continuous color mapping.

Highlight

You can chose to highlight the hovered element by setting highlightScope.highlight to 'item'. To fade the other item, set highlightScope.fade to 'global'.

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}
  height={300}
/>

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}
  height={300}
/>

Press Enter to start editing

By default highlighted/faded effect is obtained by applying the CSS property filter: saturate(...) to cells. To modify this styling, use the heatmapClasses.highlighted and heatmapClasses.faded CSS classes to override the applied style.

In the following demo, we replace the highlight saturation by a border radius and reduce the saturation of the faded cells.

<Heatmap
  slots={{ cell: CustomCell }}
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item' } }]}
  height={300}
/>

<Heatmap
  slots={{ cell: CustomCell }}
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item' } }]}
  height={300}
/>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

Charts - Heatmap

Basics

Customization

Color mapping

Highlight

Axes

Tooltip 🚧

Legend 🚧

Labels 🚧

Custom item

API