Heatmap

LightningChart JS has a powerful feature for displaying high resolution heatmaps. This can mean up to millions or even billions data points displayed at high speed and colored according to user configured color rules.

This section is about so called "static heatmaps", for scrolling and time heatmaps see Scrolling heatmap](/6.1.2/features/xy/scrolling-heatmap).

// Creation of heatmap series
const heatmapSeries = chart.addHeatmapGridSeries({
    columns: 3,
    rows: 4,
    dataOrder: 'columns',
})
    .setStart({ x: 0, y: 0 })
    .setStep({ x: 1, y: 1 })

Data input

Heatmaps consume data as uniform number matrixes. You can imagine this as a table of numbers:

	column 0	column 1	column 2
row 0	0	4	8
row 1	1	5	9
row 2	2	6	10
row 3	3	7	11

heatmapSeries.invalidateIntensityValues([
    [0, 1, 2, 3],
    [4, 5, 6, 7],
    [8, 9, 10, 11],
])

"uniform" means that when you attach this data table to a pair of X and Y axes, the X and Y step between each column and row is always the same.

Color lookup

Heatmaps are colored using a LUT (value <-> color lookup table). This defines the rules for picking a color from a data value.

heatmapSeries.setFillStyle(new PalettedFill({
    lut: new LUT({
        interpolate: true,
        steps: [
            { value: 0, color: ColorRGBA(255, 0, 0) },
            { value: 10, color: ColorRGBA(0, 0, 255) },
        ],
    }),
}))
const legend = chart.addLegendBox().add(chart)

For more details about style API, please see Styles, colors and fonts](/6.1.2/more-guides/styles-colors-and-fonts).

Percentage color lookup

LUT has also a percentageValues option, which you can use if you want to use % values of the present min-max lookup value range, rather than specific value steps:

new LUT({
    percentageValues: true,
    interpolate: true,
    steps: [
        // 0 = 0 %, 1 = 100%
        { value: 0, color: ColorCSS('red') },
        { value: 1, color: ColorCSS('green') },
    ]
})

For more details about style API, please see Styles, colors and fonts](/6.1.2/more-guides/styles-colors-and-fonts).

Intensity interpolation

// Enable intensity interpolation
heatmapSeries.setIntensityInterpolation('bilinear')

// Disable intensity interpolation
heatmapSeries.setIntensityInterpolation(undefined)

Disable wireframe

heatmapSeries.setWireframeStyle(emptyLine)

Partial data supply

Heatmap also supports modifying only a sub set of the entire data array.

HeatmapGridSeries.invalidateIntensityValues(value: {
    iColumn: number;
    iRow: number;
    values: number[][]
})

Connecting to non-default axis

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line](/6.1.2/features/xy/line)

Solve nearest from location

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line](/6.1.2/features/xy/line)

Interactions with data points

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line](/6.1.2/features/xy/line)

Extrapolating heatmap data from scatter data set

One common way of using heatmap charts is to extrapolate an uniform matrix from a scatter polar data set (something you would visualize with Scatter Chart](/6.1.2/features/xy/scatter)). For example, see the picture below, which displays both Raw samples (as scatter points) and the extrapolated heatmap:

We have computation algorithms for performing this extrapolation, but they are not publicly exposed. If you would be interested in testing this, then please get in touch](/6.1.2/contact).