Readonly axisXReadonly axisYReadonly chartReadonly scaleScale of the series
Add callback function to be triggered when specified event is fired.
// Example syntax
object.addEventListener('click', (event) => {
console.log(event)
})
Some classes also report extra information about the interacted object with the second parameter:
// Most series share information about interacted data point
series.addEventListener('click', (event, info) => {
console.log(info)
})
Optional third parameter allows registering event handlers that will automatically remove themselves after first trigger:
// Example this listener will only fire once
object.addEventListener('click', (event) => {})
Each class has its own list of supported events.
Some events are from HTML standard (click, pointerdown, etc.),
while others are own events from LightningChart JS (dispose, resize, etc.)
To find what events are available, you can try following:
TypeScript enabled, just write addEventListener and see what possible event types the IDE suggests. These APIs are strongly typed, and even the callback event will be correctly typed.K type parameter extends.Callback function that is triggered when event is fired.
Optional options: LCJSAddEventListenerOptionsOptional extra configuration options.
Clear all previous data pushed to the series.
Object itself for fluent interface.
Permanently destroy the component.
To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.
let chart = ...ChartXY()
let axisX = chart.getDefaultAxisX()
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
axisX = undefined
Object itself for fluent interface
Get heatmap aggregation config.
Aggregation mode
Get whether series is taken into account with automatic scrolling and fitting of attached axes.
By default, this is true for all series.
true default, axes will take series into account in scrolling and fitting operations.
false, axes will ignore series boundaries.
Read whether series rendering should be clipped to the area enclosed by its owning axes or not. All series rendering is ALWAYS clipped so that it doesn't leak outside the owning charts series area. However, it is optional whether the series rendering should be able to leak outside the series owning axes viewport, which might be smaller than the charts viewport (for example, when using stacked axes).
By default, clipping is enabled (true).
True or false.
Get contour lines configuration.
Contour config
Get override behavior for when this series is formatted to be displayed by a cursor.
Override callback or undefined
Get theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Boolean that describes whether drawing the theme effect is enabled around the component or not.
Get heatmap intensity interpolation mode.
Heatmap intensity interpolation mode selection.
Get boolean flag that is true when a Pointer device is over the chart component.
In order for this method to work, the components pointer event tracking must be enabled (getPointerEvents)
Boolean
Invalidate range of heatmap intensity values starting from first column and row, updating coloring if a Color look up table (LUT) has been attached to the series (see setFillStyle).
// Example, 3x3 grid full invalidation.
const heatmapGridSeries = ChartXY.addHeatmapGridSeries({
dataOrder: 'columns',
columns: 3,
rows: 3
})
heatmapGridSeries.invalidateIntensityValues([
// Column 1 intensity values.
[0, 0, 0],
// Column 2 intensity values.
[1, 1, 1],
// Column 3 intensity values.
[0, 2, 0],
])
Data interpretation basis is defined by dataOrder property from when the series was created. Can be either list of columns, or list of rows.
invalidateIntensityValues can trigger warnings when used controversially.
In production applications, these can be controlled with warnings.
Object itself for fluent interface.
Matrix containing intensity values for each data slot of the grid.
Invalidate a partial range of heatmap intensity values, updating coloring if a Color look up table (LUT) has been attached to the series (see setFillStyle).
// Example, 100x10 grid invalidate partial section of grid.
const heatmapGridSeries = ChartXY.addHeatmapGridSeries({
dataOrder: 'columns',
columns: 100,
rows: 10
})
heatmapGridSeries.invalidateIntensityValues({
// Index of first invalidated column.
iColumn: 50,
// Index of first invalidated row.
iRow: 2,
// Intensity values matrix. It's dimensions imply the amount of invalidated columns & rows.
values: [
// 1st invalidated column intensity values.
[1, 1, 1, 1, 1],
// 2nd invalidated column intensity values.
[2, 2, 2, 2, 2],
// 3rd invalidated column intensity values.
[1, 0, 0, 0, 1],
// 4th invalidated column intensity values.
[0, 1, 0, 1, 0],
// 5th invalidated column intensity values.
[0, 0, 1, 0, 0],
],
})
invalidateIntensityValues can trigger warnings when used controversially.
In production applications, these can be controlled with warnings.
Object itself for fluent interface.
Partial invalidation information, where values is an intensity value matrix, iColumn the first affected column and iRow the first affected row.
Invalidate a partial range of heatmap intensity values with flat data array input.
// Example, 100x10 grid invalidate partial section of grid.
const heatmapGridSeries = ChartXY.addHeatmapGridSeries({
dataOrder: 'columns',
columns: 100,
rows: 10
})
heatmapGridSeries.invalidateIntensityValues({
// Index of first invalidated column.
iColumn: 50,
// Index of first invalidated row.
iRow: 2,
columns: 2,
rows: 5,
values: new Float32Array([
// 1st column
0, 1, 2, 3, 4,
// 2nd column
5, 6, 7, 8, 9,
]),
})
invalidateIntensityValues can trigger warnings when used controversially.
In production applications, these can be controlled with warnings.
Object itself for fluent interface.
Partial invalidation information, where values is an intensity value matrix, iColumn the first affected column and iRow the first affected row.
Invalidate the entire heatmap intensity values by supplying a single flat number array.
Interpretation order depends on dataOrder parameter configured when creating the series.
dataOrder === 'columns': [x0_y0, x0_y1, x0_y2, x0_yn, x1_y0, x1_y1, x1_y2, x1_yn, ...]
dataOrder === 'rows': [x0_y0, x1_y0, x2_y0, xn_y0, x0_y1, x1_y1, x2_y1, xn_y1, ...]
Flat data input can situationally be significantly more efficient than number[][] based input:
If your heatmap is very large in one dimension and considerably smaller in the other dimension AND your input data is flat, then you can enable some case specific optimizations by overriding heatmap tiling safety values. For example:
const columns = 16500
const rows = 250
const heatmap = chart.addHeatmapGridSeries({
columns, rows,
// This can allow the heatmap to store data internally in a single tile, which significantly increases efficiency when data is supplied as a single flat array.
maxTileSize: Math.max(columns, rows)
})
While the method definition accepts any TypedArray (i.e. Float64Array, Uint16Array etc.), internally the value is always mapped to a Float32Array.
For this reason, Float32Array is the most performant input type.
Object itself
Flat number array.
Remove event listener added using addEventListener.
The expected argument should be the exact same callback function that was supplied using addEventListener:
// Basic example syntax
const listener = () => {}
obj.addEventListener('click', listener)
obj.removeEventListener('click', listener)
// Basic boilerplate of custom interaction when user drags on an object
obj.addEventListener('pointerdown', (eventDown) => {
let prevCoord = eventDown
const handlePointerMove: LCJSInteractionEventListener<'pointermove'> = (eventMove) => {
const delta = { x: eventMove.clientX - prevCoord.clientX, y: eventMove.clientY - prevCoord.clientY }
prevCoord = eventMove
console.log(delta, eventMove.clientX, eventMove.clientY)
}
const handlePointerUp: LCJSInteractionEventListener<'pointerup'> = (eventUp) => {
window.removeEventListener('pointermove', handlePointerMove)
window.removeEventListener('pointerup', handlePointerUp)
}
window.addEventListener('pointermove', handlePointerMove)
window.addEventListener('pointerup', handlePointerUp)
})
Listener that was added using addEventListener.
Set heatmap aggregation behavior. By default, heatmaps display the closest heatmap cell value to each pixel that is rendered on the screen. With dense, high resolution heatmaps, this can mean that there is no guarantee which data value is displayed in a pixel.
Heatmap aggregation can be enabled to specify this behavior (which value to show when multiple cell values are contained by single pixel) at the expense of a performance hit.
// Example usage
heatmap
// Ensure bilinear interpolation is disabled
.setIntensityInterpolation('disabled')
.setAggregation('max')
Doesn't work together with bilinear interpolation.
Object itself
Heatmap aggregation mode
Set component highlight animations enabled or not. For most components this is enabled by default.
// Example usage, disable highlight animations.
component.setAnimationHighlight(false)
Object itself
Animation enabled?
Set whether series is taken into account with automatic scrolling and fitting of attached axes.
By default, this is true for all series.
By setting this to false, any series can be removed from axis scrolling/fitting.
// Example syntax, remove series from automatic scrolling / fitting.
LineSeries.setAutoScrollingEnabled(false)
Object itself for fluent interface.
true default, axes will take series into account in scrolling and fitting operations.
false, axes will ignore series boundaries.
Configure whether series rendering should be clipped to the area enclosed by its owning axes or not. All series rendering is ALWAYS clipped so that it doesn't leak outside the owning charts series area. However, it is optional whether the series rendering should be able to leak outside the series owning axes viewport, which might be smaller than the charts viewport (for example, when using stacked axes).
By default, clipping is enabled (true).
// Example, disable clipping, allowing the series rendering to leak outside its own axes.
SeriesXY.setClipping(false)
Object itself
Clipping enabled or disabled.
Set contour lines.
// Example syntax
heatmap.setContours({
levels: [
{ value: 10 },
{
value: 40,
label: 'Hey',
labelFont: { family: 'Courier' },
labelColor: ColorRGBA(255, 0, 0),
strokeStyle: new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 0) }) })
}
]
})
Object itself.
Contour config
Configure whether cursors should pick on this particular series or not.
// Example, prevent chart auto cursor from snapping to a series.
LineSeries.setCursorEnabled(false)
Related API:
Set override behavior for when this series is formatted to be displayed by a cursor. This can be used to alter and expand on cursor formatting done for a specific series, either by the library's default cursor formatters or even the users own cursor formatters defined on chart level.
// Example syntax, add extra row to display a custom data property
series.setCursorFormattingOverride((hit, before) => {
if (!isHitSampleXY(hit)) return before
const customPropertyValue = data[hit.iSample].customProperty
return [...before, ['ASD', '', customPropertyValue.toFixed(3)]]
})
To use this with users own cursor formatters, you can use useCursorFormatterSeriesOverride:
// Example syntax, define custom cursor formatting with support for series overrides
chart.setCursorFormatting((_, __, hits) => {
return [
[hits[0].axisX.formatValue(hits[0].x)],
...hits.map((hit) => useCursorFormatterSeriesOverride(hit, [['Y:', '', hit.axisY.formatValue(hit.y)]])).flat(),
]
})
Object itself.
Override callback or undefined
Configure draw order of the series.
The drawing order of series inside same chart can be configured by configuring their seriesDrawOrderIndex.
This is a simple number that indicates which series is drawn first, and which last.
The values can be any JS number, even a decimal. Higher number results in series being drawn closer to the top.
By default, each series is assigned a running counter starting from 0 and increasing by 1 for each series.
// Example, create 2 series and configure them to be drawn in reverse order.
const series1 = ChartXY.addLineSeries()
.setDrawOrder({ seriesDrawOrderIndex: 1 })
const series2 = ChartXY.addLineSeries()
.setDrawOrder({ seriesDrawOrderIndex: 0 })
// Example, ensure a series is drawn above other series.
SeriesXY.setDrawOrder({ seriesDrawOrderIndex: 1000 })
Object itself.
Object with seriesDrawOrderIndex property.
Set theme effect enabled on component or disabled.
A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components.
Whether this effect is drawn above a particular component can be configured using the setEffect method.
// Example, disable theme effect from a particular component.
Component.setEffect(false)
For the most part, theme effects are enabled by default on most components.
Theme effect is configured with effect property.
Object itself.
Theme effect enabled
Set end coordinate of Heatmap on its X and Y axis.
Object itself.
Coordinate on axis where last heatmap sample will be positioned.
Set fill style of heatmap series.
Supported fill styles:
Colors heatmap fill by looking color up from LUT based on heatmap intensity values.
// Example, color look up by intensity values.
heatmapSeries.setFillStyle(
new PalettedFill({
lut: new LUT({
steps: [
{ value: 0, color: ColorCSS('red') },
{ value: 20, color: ColorCSS('blue') },
],
interpolate: true,
}),
}),
)
Assign intensity values with invalidateIntensityValues.
Note, Heatmap doesn't currently support color (fallback color).
Solid color for all heatmap cells. Supported for debugging purposes mainly.
Disables heatmap fill.
// Example, hide heatmap fill and show wireframe.
heatmapSeries
.setFillStyle(emptyFill)
.setWireframeStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
Object itself for fluent interface.
FillStyle object or function which modifies current value.
Set state of component highlighting.
// Example usage
component.setHighlight(true)
component.setHighlight(0.5)
If highlight animations are enabled (which is true by default), the transition will be animated. As long as the component is highlighted, the active highlight intensity will be animated continuously between 0 and the configured value. Highlight animations can be disabled with setAnimationHighlight
Object itself
Boolean or number between 0 and 1, where 1 is fully highlighted.
Set highlight on mouse hover enabled or disabled.
Mouse interactions have to be enabled on the component for this to function as expected. See setPointerEvents for more information.
Object itself for fluent interface.
True if highlighting on mouse hover, false if no highlight on mouse hover
Set icon of the chart component. This is displayed in legends and by default cursor formatters.
const image = new Image()
image.src = 'image.png'
const icon = chart.engine.addCustomIcon(image)
ChartComponent.setIcon(icon)
Object itself.
Icon
Set heatmap intensity interpolation mode.
'disabled' or undefined: Interpolation disabled; draw data exactly as it is.
'bilinear': Each PIXEL is colored based on an Bi-linearly interpolated intensity value based on the 4 closest real intensity values.
Object itself for fluent interface.
Heatmap intensity interpolation mode selection.
Sets the name of the Component
Object itself
Name of the Component
Set whether element can be target of pointer events or not.
Disabling pointer events means that the objects below this component can be interacted through it.
Object itself for fluent interface
Specifies state of mouse interactions
Set start coordinate of Heatmap on its X and Y axis.
Object itself.
Coordinate on axis where 1st heatmap sample will be positioned.
Set Step between each consecutive heatmap value on the X and Y Axes.
X = columns, Y = rows
Object itself.
Axis offset between heatmap samples.
Set element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
Set style of wireframe.
// Example, disable wireframe.
heatmapSeries.setWireframeStyle(emptyLine)
// Example, set wireframe style.
heatmapSeries.setWireframeStyle(new SolidLine({
thickness: 1,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0, 255) })
}))
Note that wireframe is not supported on high precision axis!
Wireframe is a line grid that highlights the edges of each cell of the heatmap.
Series itself for fluent interface.
Either a LineStyle object or a function, which will be used to create a new LineStyle based on current value.
Method for solving the nearest data point to a given coordinate on screen.
// Example syntax
chart.seriesBackground.addEventListener('click', event => {
const nearest = series.solveNearest(event, 'show-nearest')
console.log(nearest)
})
SolveResult object or undefined.
Reference coordinate on web page as client coordinates. This can for example be directly an Event object.
Optional control for solve nearest behavior
Series for visualizing a Intensity Heatmap Grid with a static column and grid count. Has API for fast modification of cell values.
HeatmapGridSeriesIntensityValuesis optimized for massive amounts of data - here are some reference specs on average PC to give an idea:1000x1000) is cold started in ~0.3 seconds.1000x1000) is re-populated (change data set) in ~0.050 seconds.4000x4000) is cold started in ~2.0 seconds.4000x4000) is re-populated (change data set) in ~0.5 seconds.HeatmapGridSeriesIntensityValuesmax data amount is entirely restricted by the client hardware RAM and more specifically amount of RAM usable by the context running LightningChart JS. If by increasing the amount ofcolumnsandrowsyou encounter suddenly weak performance, it is likely that there is not enough RAM memory available.Created with addHeatmapGridSeries.
Frequently used API: