/*
 * LightningChartJS example that showcases a simple XY line series.
 */
// Import LightningChartJS
const lcjs = require('@arction/lcjs')

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    IntensitySeriesTypes,
    IndividualPointFill,
    ColorHSV,
    Themes
} = lcjs

// Helper function to help turn degrees to radians
function degToRad(angle) {
    return angle * Math.PI / 180
}

// Resolution of each row/column, specifying how many cells
// are in the heatmap.
const resolution = 20

// Create a new ChartXY.
const chart = lightningChart().ChartXY({
    // theme: Themes.darkGold
})
chart.setTitle('Heatmap using IntensityMesh')

// Add a heatmap to the chart, as a IntensityMesh
const heatmap = chart
    .addHeatmapSeries({
        rows: resolution,
        columns: resolution,
        start: { x: 10, y: 10 },
        end: { x: 1990, y: 1990 },
        pixelate: true,
        type: IntensitySeriesTypes.Mesh
    })
    // Add colors and invalidate the Series based on the colors assigned.
    .invalidateColorsOnly((row, column) => ColorHSV(Math.random() * 70, 0.8))
    // Use IndividualPointFill to apply individual color per cell.
    .setFillStyle(new IndividualPointFill())
    // Edit the geometry and invalidate the Series based on the new geometry.
    .invalidateGeometryOnly((row, column, prev) => ({
        // Compute the geometry for each cell in the heatmap.
        x: prev.x * Math.sin(degToRad(row + 1)),
        y: prev.x * Math.sin(degToRad(column + 1))
    }))

// Add LegendBox to chart.
const legend = chart.addLegendBox()
    // Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
    .setAutoDispose({
        type: 'max-width',
        maxWidth: 0.30,
    })
    .add(chart)

JavaScript Heatmap Mesh Chart - Editor

xy heatmap palette

This example shows a simple use-case scenario for mesh-based Heatmaps.

Heatmaps are a powerful tool for visualizing magnitude in two dimensions. This example focuses on the IntensityMesh-type Heatmap Series. The difference between grid and mesh types is apparent in the naming; whereas grid is always a rectangular shape, the mesh type allows users to modify the geometry of the shape.

Heatmaps can be created in XY Charts:

// Add heatmap Series to a XY Chart
chartXY.addHeatmapSeries( {
    rows:       verticalResolution,
    columns:    horizontalResolution,
    start:      { x: 0, y: 0 },
    end:        { x: 100, y: 100 },
    pixelate:   false,
    // Make sure we're using the Mesh IntensitySeriesType
    type:       IntensitySeriesTypes.Mesh
})

The Mesh IntensitySeriesType has the same API that is available with the Grid IntensitySeriesType, but in addition it has the invalidateGeometryOnly method:

// Use invalidateGeometryOnly to edit the geometry of the heatmap and invalidate it.
// This can be done by supplying a Matrix of Points to the method.
heatmap.invalidateGeometryOnly( vertices: Matrix<Point> )
// Optionally, the geometry can be modified by supplying the method with a callback
// which modifies each point.
heatmap.invalidateGeometryOnly( vertices: UpdateGeometryCallback )