Protected _isActive state of Cursor
Readonly axisXReadonly axisYReadonly chartReadonly scaleScale of the series
Push a Matrix of intensity values into the Heatmap grid. Each value describes one cell in the grid.
Order of data is selected when creating the series;
scrollDimension: 'columns' ->
[
[
0, // Intensity value column = 0, row = 0
0, // Intensity value column = 0, row = 1
0, // Intensity value column = 0, row = n
],
[
0, // Intensity value column = 1, row = 0
0, // Intensity value column = 1, row = 1
0, // Intensity value column = 1, row = n
],
]
scrollDimension: 'rows' ->
[
[
0, // Intensity value row = 0, column = 0
0, // Intensity value row = 0, column = 1
0, // Intensity value row = 0, column = n
],
[
0, // Intensity value row = 1, column = 0
0, // Intensity value row = 1, column = 1
0, // Intensity value row = 1, column = n
],
]
Example usage:
// Create x-scrolling intensity heatmap.
const series = ChartXY.addHeatmapScrollingGridSeries({
heatmapDataType: 'intensity',
scrollDimension: 'columns',
resolution: 5,
start: { x: 0, y: 0 },
step: { x: 1, y: 1 },
})
// Push a column into heatmap.
series.addIntensityValues([
[0, 10, 0, 20, 0]
])
invalidateIntensityValues can trigger warnings when used controversially.
In production applications, these can be controlled with warnings.
Object itself for fluent interface.
Matrix of intensity values - Each array represents a column or row, and each number represents a cell in the grid.
Add Marker to the Series.
SeriesMarkerXY
Optional StaticCursorBuilderXY to customize the markers background shape (defaults to rectangle). See MarkerBuilders for example.
Attach object to an legendBox entry
Series itself for fluent interface
Object which has to be attached
Flag that indicates whether the Attachable should be hidden or not, when its respective Entry is clicked.
By default, entries are assigned a smooth looking gradient based on the component color. If this flag is true, then this is skipped, and exact component solid fill is used instead.
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 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.
Get ResultTable Formatter.
Function which builds ResultTable content for this series type.
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 fill pixel interpolation mode.
Heatmap fill pixel interpolation mode selection.
Invalidate existing and/or add new intensity values in the Heatmap grid. The location along scrolling dimension is identified by a sample index.
Sample index 0 would reference the first sample in the heatmap, whereas 1 the second sample.
This allows, for example, the modification of previously pushed heatmap samples.
This method is also capable of adding new samples into the heatmap, which happens if the sample index exceeds the currently existing sample count (this can be received with getSampleCount method).
If this method is used to push new samples into the heatmap in a manner where gaps form between the new samples and previous ones, the gaps are automatically filled by duplicating the previous last heatmap sample!
// Example, modify last sample pushed to heatmap
heatmapSeries.invalidateIntensityValues({
iSample: heatmapSeries.getSampleCount() - 1,
values: [[0, 0, 0, 0, 0]]
})
// Example, update 5 samples starting at sample index 2
heatmapSeries.invalidateIntensityValues({
iSample: 2,
values: [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
]
})
Object itself.
Object with sample index and intensity values parameters.
Subscribe onDispose event.
This event is triggered whenever the ChartComponent is disposed.
// Example usage
lineSeries.onDispose(() => {
console.log('lineSeries was disposed')
})
lineSeries.dispose()
Token of subscription
Event handler function
Subscribe to highlight object event. This is called whenever an object is highlighted.
Token that can be used to unsubscribe from the event.
Function that is called when event is triggered.
Add event listener to Mouse Click Event
Token of the event listener
Event listener for Mouse Click Event
Add event listener to Mouse Double Click Event
Token of the event listener
Event listener for Mouse Double Click Event
Add event listener to Mouse Down Event
Token of the event listener
Event listener for Mouse Down Event
Subscribe to Mouse Drag event
Subscribe to Mouse Drag Start event
Subscribe to Mouse Drag Stop event
Add event listener to Enter Event
Token of the event listener
Event listener for Mouse Enter Event
Add event listener to Mouse Leave Event
Token of the event listener
Event listener for Mouse Leave Event
Add event listener to Mouse Move Event
Token of the event listener
Event listener for Mouse Move Event
Add event listener to Mouse Up Event
Token of the event listener
Event listener for Mouse Up Event
Subscribe to Mouse Wheel event
Token of subscription
Event handler function
Subscribe to Touch End event
Token of subscription
Event handler function
Subscribe to Touch Move event
Token of subscription
Event handler function
Subscribe to Touch Start event
Token of subscription
Event handler function
Register new event listener to visibleStateChanged event.
Event listener for visibleStateChanged
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 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 cursor interpolation enabled.
If enabled, cursors will display bilinearly interpolated intensity values from the four closest heatmap cells to the mouse pointer. Otherwise, cursor will display the nearest actual data point supplied by user.
Object itself for fluent interface
Boolean flag
Method for customizing contents of ResultTables when pointing at this Series.
HeatmapScrollingGridSeries.setCursorResultTableFormatter((builder, series, dataPoint) =>
builder
.addRow('Pointing at')
.addRow(`${dataPoint.x.toFixed(1)}, ${dataPoint.y.toFixed(1)}`)
.addRow(`= ${dataPoint.intensity.toFixed(1)}`),
)
Default Axis formatting can be referenced by using formatValue method.
Object itself
Function which builds ResultTable content. See definition of HeatmapSeriesFormatterIntensity for supplied formatting information.
Disable automatic data cleaning.
// Example syntax, disable data cleaning.
series.setDataCleaning(undefined)
Object itself for fluent interface.
Data cleaning configuration.
Enable automatic data cleaning by minDataPointCount configuration.
Specifying minDataPointCount enables lazy cleaning of data that is outside view as long as the remaining data amount doesn't go below the configured threshold.
// Example syntax for specifying minDataPointCount
series.setDataCleaning({ minDataPointCount: 10000 })
Usage of minDataPointCount is recommended in most common applications that require automatic data cleaning.
The actual value is often not very particular, just setting it above 0 to enable it is usually enough (lazy data cleaning of out of view data).
// Example, enable lazy data cleaning of out of view data.
series.setDataCleaning({ minDataPointCount: 1 })
Object itself for fluent interface.
Data cleaning configuration.
Enable automatic data cleaning by maxDataPointCount configuration.
Specifying maxDataPointCount results in data cleaning always happening exactly when total data amount exceeds the supplied threshold.
// Example syntax for specifying maxDataPointCount
series.setDataCleaning({ maxDataPointCount: 10000 })
maxDataPointCount is usually used in memory limited applications to prevent running out of memory.
maxDataPointCount is currently only supported by only select series:
If the feature receives good support and usage from the user base, it might be expanded to all series types in a future release.
Object itself for fluent interface.
Data cleaning configuration.
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 fill style of heatmap series.
Supported fill styles:
PalettedFill:
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,
}),
}),
)
Intensity values are defined when data is pushed in with addIntensityValues method.
Note, Heatmap doesn't currently support color (fallback color).
SolidFill:Solid color for all heatmap cells. Supported for debugging purposes mainly.
emptyFill:
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 setMouseInteractions for more information.
Object itself for fluent interface.
True if highlighting on mouse hover, false if no highlight on mouse hover
Set component mouse interactions enabled or disabled.
Disabling mouse interactions means that the objects below this component can be interacted through it.
Possible side-effects from disabling mouse interactions:
Object itself for fluent interface
Specifies state of mouse interactions
Sets the name of the Component updating attached LegendBox entries
Object itself
Name of the Component
Set heatmap fill pixel interpolation mode.
'disabled' or undefined: Interpolation disabled; all pixels within a grid cell share the same color.
'bilinear': Each pixel is colored individually by bilinear interpolation.
Object itself for fluent interface.
Heatmap fill pixel interpolation mode selection.
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.
Wireframe is a line grid that highlights the edges of each cell of the heatmap.
// 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) })
}))
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 from a given coordinate on screen.
// Example usage, from mouse move event.
ChartXY.onSeriesBackgroundMouseMove((_, event) => {
const result = LineSeries.solveNearestFromScreen(event)
})
// Example usage, arbitrary coordinate on client coordinate system.
const result = LineSeries.solveNearestFromScreen({ clientX: 100, clientY: 200 })
Translating coordinates from other coordinate systems is also possible, see translateCoordinate.
undefined or data structure with solve result information that can also be used for positioning custom cursors.
Location in HTML client coordinates.
Optional interpolate: booleanThis method signature is deprecated since v4.2.0. Supply CoordinateClient instead.
Optional interpolate: boolean
Series class for visualizing a Heatmap Grid, with API for pushing data in a scrolling manner (append new data on top of existing data).
HeatmapScrollingGridSeriesIntensityValuesis optimized for massive amounts of data - here are some reference specs on average PC to give an idea:rows: 2048, 1000 columns/s) runs consistently and smoothly with 60 FPS and no stuttering. CPU usage stays easily below 40%.rows: 4096, 2000 columns/s) runs consistently and smoothly with 60 FPS and minor stuttering.HeatmapScrollingGridSeriesIntensityValuesmax data amount is entirely restricted by the client hardware RAM and more specifically amount of RAM usable by the context running LightningChart JS. If performance suddenly plummets at some approximate data threshold, then it is likely that there is not enough RAM available. Use data cleaning configuration and suitable Axis intervals to adjust to your hardware limitations.Each cell of the heatmap grid is associated with a numeric intensity value, which can be used in conjuction with a Color look up table (LUT).
Created with addHeatmapScrollingGridSeries.
Frequently used API: