React ChartsHeatmap Series

A Heatmap Series displays data in a matrix format, using colours to denote the magnitude of the values.

Simple Heatmap Copy Link

To create a Heatmap Series, use the heatmap series type.

{
    series: [
        {
            type: 'heatmap',
            xKey: 'month',
            yKey: 'year',
            colorKey: 'temperature',
        },
    ],
}

In this configuration:

• xKey is set to 'month', which is the category for the x-axis.
• yKey is set to 'year', which is the category for the y-axis.
• colorKey is set to 'temperature', which supplies numerical values for the Colour Scale.

Colour Scale Copy Link

Use colorScale to control how numeric values map to colours. This includes custom colours, discrete bins, and a fixed domain.

{
    series: [
        {
            type: 'heatmap',
            xKey: 'month',
            yKey: 'year',
            colorKey: 'temperature',
            colorScale: {
                fills: [{ color: 'navy' }, { color: 'lightyellow', stop: 10 }, { color: 'darkred' }],
            },
        },
    ],
}

In this example:

• fills specifies the colours and optional stop positions. Without stop values, colours are spaced equally across the data range.
• mode switches between a 'continuous' gradient and 'discrete' bins.
• domain overrides the auto-detected range to consistent colours regardless of the data extent.

For the full range of options including named stops, missing data handling, and more see the Colour Scale page.

Labels Copy Link

If label.enabled is set to true, the labels will show the numeric value from colorKey.

colorKey: 'temperature',
label: {
    enabled: true,
    formatter: ({ datum: { temperature } }) => `${temperature.toFixed(0)}°C`,
}

A label formatter can be used to customise the label text.

Gradient Legend Copy Link

The Gradient Legend is enabled by default for heatmap series using a colorKey. It displays a colour bar to help match cell colours to values.

{
    gradientLegend: {
        enabled: true,
    },
}

For position, size, and label customisation options, see the Colour Scale page.

API Reference Copy Link