Axis X
Axis Y
Scale of the series
Add Marker to the Series.
StaticCursorBuilderXY object for customized look of marker. MarkerBuilders.XY can be used to build a custom one from scratch.
SeriesMarkerXY
Attach object to an legendBox entry
Object which has to be attached
Flag that indicates whether the Attachable should be disposed/restored, when its respective Entry is clicked.
Series itself for fluent interface
Clear all previous data pushed to the series.
Object itself for fluent interface.
Remove everything related to the object from all collections associated with rendering cycle and allows the object to be collected by GC
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.
Whether Cursor is enabled or not
Get if cursor interpolates solved data-points along series by default.
Boolean flag
Get ResultTable Formatter.
Function which builds ResultTable content for this series type.
Get fill style of series.
FillStyle.
Get boolean flag for whether object should highlight on mouse hover
Boolean for if object should highlight on mouse hover or not.
the state of highlighted flag
Get boolean flag for whether object is currently under mouse or not
Boolean for is object under mouse currently
Get mouse interactions enabled or disabled. Disabled mouse-interactions will naturally prevent mouse-driven highlighting from ever happening.
Mouse interactions state
Get the name of the Component.
The name of the Component.
Get heatmap fill pixel interpolation mode.
Heatmap fill pixel interpolation mode selection.
Get style of wireframe.
Wireframe is a line grid that highlights the edges of each cell of the heatmap.
LineStyle.
Max X value of the series
Min X value of the series
Max Y value of the series
Min Y value of the series
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 HeatmapGridSeriesIntensityValues.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 HeatmapGridSeriesOptions.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 LightningChartOptions.warnings.
Matrix containing intensity values for each data slot of the grid.
Object itself for fluent interface.
Invalidate a partial range of heatmap intensity values, updating coloring if a Color look up table (LUT) has been attached to the series (see HeatmapGridSeriesIntensityValues.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 LightningChartOptions.warnings.
Partial invalidation information, where values
is an intensity value matrix, and iStartPrimary
is the index of first invalidated coordinate along primary dimension.
Object itself for fluent interface.
TODO: True for enabled and false for disabled
Unsubscribe from Highlight object event. This is called whenever an object is highlighted
Token that was received when subscribing to the event.
True if the unsubscription was successful.
Remove event listener from Series Hover Event.
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Click Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Double Click Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Down Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Drag Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Drag Start Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Drag Stop Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Enter Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Leave Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Move Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Up Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Mouse Wheel Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Touch End Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Touch Move Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Remove event listener from Touch Start Event
Token of event listener which has to be removed
True if the listener is successfully removed and false if it is not found
Subscribe to highlight object event. This is called whenever an object is highlighted.
Function that is called when event is triggered.
Token that can be used to unsubscribe from the event.
Add event listener to Series Hover Event. Hover event is a custom mouse-event designed for Series that is the main link between Cursors and Series.
Callback function that is called whenever mouse enters / moves or leaves the Series
Token of the event listener
Add event listener to Mouse Click Event
Event listener for Mouse Click Event
Token of the event listener
Add event listener to Mouse Double Click Event
Event listener for Mouse Double Click Event
Token of the event listener
Add event listener to Mouse Down Event
Event listener for Mouse Down Event
Token of the event listener
Subscribe to Mouse Drag event
Subscribe to Mouse Drag Start event
Subscribe to Mouse Drag Stop event
Add event listener to Enter Event
Event listener for Mouse Enter Event
Token of the event listener
Add event listener to Mouse Leave Event
Event listener for Mouse Leave Event
Token of the event listener
Add event listener to Mouse Move Event
Event listener for Mouse Move Event
Token of the event listener
Add event listener to Mouse Up Event
Event listener for Mouse Up Event
Token of the event listener
Subscribe to Mouse Wheel event
Event handler function
Token of subscription
Subscribe to Touch End event
Event handler function
Token of subscription
Subscribe to Touch Move event
Event handler function
Token of subscription
Subscribe to Touch Start event
Event handler function
Token of subscription
Tell the owning chart to restore this series.
Object itself.
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)
true
default, axes will take series into account in scrolling and fitting operations.
false
, axes will ignore series boundaries.
Object itself for fluent interface.
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:
'nearest-x'
, 'nearest'
, etc.).
This method is not available for all series types (more support will be added in near future).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.
Boolean flag
Object itself for fluent interface
Method for customizing contents of ResultTables when pointing at this Series.
HeatmapGridSeries.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 Axis.formatValue method.
Function which builds ResultTable content. See definition of HeatmapSeriesFormatterIntensity for supplied formatting information.
Object itself
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.
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) }))
FillStyle object or function which modifies current value.
Object itself for fluent interface.
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.
True if highlighting on mouse hover, false if no highlight on mouse hover
Object itself for fluent interface.
Enable or disable forced highlighting of component
True for enabled and false for disabled
component itself for fluent interface
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:
Specifies state of mouse interactions
Object itself for fluent interface
Sets the name of the Component updating attached LegendBox entries
Name of the Component
Object itself
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.
Heatmap fill pixel interpolation mode selection.
Object itself for fluent interface.
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) })
}))
Wireframe is a line grid that highlights the edges of each cell of the heatmap.
Either a LineStyle object or a function, which will be used to create a new LineStyle based on current value.
Series itself for fluent interface.
Series for visualizing a Intensity Heatmap Grid with a static column and grid count. Has API for fast modification of cell values.
HeatmapGridSeriesIntensityValues
is 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.HeatmapGridSeriesIntensityValues
max 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 ofcolumns
androws
you encounter suddenly weak performance, it is likely that there is not enough RAM memory available.Created with ChartXY.addHeatmapGridSeries.
Frequently used API: