Heatmap

PolarChart includes a feature for rendering high resolution Polar heat-maps. This can mean up to millions or even billions of data points displayed at high speed and colored according to user configured color rules.

With LightningChart, Polar heatmaps charts are extremely similar to 2D Heatmaps. As such, we recommend you to also check out the Heatmap guide.

// Creation of polar heatmap series
const heatmapSeries = chart
    .addHeatmapSeries({
        sectors: 4,
        annuli: 3,
        amplitudeStart: 0,
        amplitudeEnd: 1,
    })

Data input

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

	annulus 0	annulus 1	annulus 2
sector 0	0	4	8
sector 1	1	5	9
sector 2	2	6	10
sector 3	3	7	11

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

"uniform" means that the amplitude and radial step between each measurement 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) },
        ],
    }),
}))

For more details about style API, please see 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') },
    ]
})

Polar heatmap currently doesn't support percentageValues! If your use case requires this, please contact us.

Intensity interpolation

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

// Disable intensity interpolation
heatmapSeries.setIntensityInterpolation(undefined)

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 Polar Scatter Chart). 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.

Partial data supply

Polar heatmap series also supports modifying only a sub set of the entire data array.

heatmapSeries.invalidateIntensityValues({ iSector: number; iAnnulus: number; values: number[][] })

User interactions

This section works the same as for Line, to avoid duplication of guides, please refer to the section under 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

Interactions with data points

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line