JavaScript Mesh Circle Chart
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 Palette
const lut = new LUT({
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 = new PalettedFill({ lut, lookUpProperty: 'x' })