Javascript ChartsHeatmap Series

javascript logo
Enterprise

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

Simple Heatmap

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.

Customisation

Colour Range

Series items colours can be customised via the colorRange configuration array.

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

Colour Range can also have more than 2 values.

series: [
    {
        type: 'heatmap',
        xKey: 'month',
        yKey: 'year',
        colorKey: 'temperature',
        colorRange: ['#43a2ca', '#a8ddb5', '#f0f9e8'],
    },
],

Labels

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

colorKey: 'temperature',
label: {
    enabled: true,
},

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

colorKey: 'temperature',
label: {
    enabled: true,
    formatter: ({ datum, colorKey }) => {
        const value = datum[colorKey];
        return `${value.toFixed(0)}°C`;
    },
},

Gradient Legend

The Gradient Legend aids in matching the colour coding of the heatmap series to the underlying values, and is enabled by default.

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

Position

By default the Gradient Legend is placed at the bottom of the chart. Use the position option to change this.

gradientLegend: {
   position: 'right',
   reverseOrder: true,
},

In the above example, reverseOrder is used to change the direction of the Gradient Legend to display the values from top to bottom.

Size

gradientLegend: {
    gradient: {
        thickness: 50,
        preferredLength: 400,
    },
},

In the above configuration:

  • thickness controls the thickness (or width) of the gradient bar.
  • preferredLength sets the initial length of the gradient bar. It is only preferred, as the Gradient Legend is constrained by the container edges.

Labels

It is possible to customise the font, colour and padding of the labels by using the scale options.

gradientLegend: {
    scale: {
        label: {
            fontSize: 20,
            fontStyle: 'italic',
            fontWeight: 'bold',
            fontFamily: 'serif',
            color: 'red',
        },
        padding: 20,
    },
},

API Reference