This example shows visualization of intensity in circle-based mesh chart
Heatmaps can be created in XY Charts:
// Add meshCircle Series to a XY Chart
chartXY.addHeatmapSeries({
rows: verticalResolution,
columns: horizontalResolution,
start:{ x:0, y:0},
end:{ x:50, y:50},
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 meshSircle and invalidate it.// This can be done by supplying a Matrix of Points to the method.
meshCircle.invalidateGeometryOnly( vertices )// Optionally, the geometry can be modified by supplying the method with a callback// which modifies each point.
meshCircle.invalidateGeometryOnly((row, column, current)=>({x: row, y: column}))// adding values for mesh is done using invalidateValuesOnly
meshCircle.invalidateValuesOnly( values )// coloring is done using the Paletteconst lut =newLUT({
steps:[{ value:0, color:ColorRGBA(0,0,0,0)},// transparent at value 0{ value:50, color:ColorRGBA(255,255,0)},// yellow at value 50{ value:100, color:ColorRGBA(255,0,0)}// red at value 100],
interpolate:true})const paletteFill =newPalettedFill({ lut, lookUpProperty:'x'})