Protected _shadingAdd 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.
Append values to the Surface Scrolling Grid Series.
The series type can contain between 1 and 2 different data sets (Y values and Intensity values). This same method is used for managing both types of data;
When addValues is called, the parameter is wrapped in an object { }, and one of (or both) yValues and intensityValues can be supplied.
// Example syntax,
surfaceScrollingGridSeries.addValues({
yValues: ...
intensityValues ...
})
The type of yValues and intensityValues is a number matrix. At first level, it is a list of samples to add.
yValues: [
// Sample 1,
// Sample 2
]
If both yValues and intensityValues are specified, then their length should be exactly same!
Order of sample data is selected when the series is created;
scrollDimension: 'columns' ->
yValues: [
[
0, // column = 0, row = 0
0, // column = 0, row = 1
0, // column = 0, row = n
],
[
0, // column = 1, row = 0
0, // column = 1, row = 1
0, // column = 1, row = n
],
]
scrollDimension: 'rows' ->
yValues: [
[
0, // row = 0, column = 0
0, // row = 0, column = 1
0, // row = 0, column = n
],
[
0, // row = 1, column = 0
0, // row = 1, column = 1
0, // row = 1, column = n
],
]
Example usage:
// Create X-scrolling surface series.
const scrollingSurfaceSeries = Chart3D.addSurfaceScrollingGridSeries({
scrollDimension: 'columns',
rows: 5,
columns: 50,
})
// Push two Y columns into the series.
scrollingSurfaceSeries.addValues({
yValues: [
[0, 0, 0, 0, 0],
[0, 10, 0, 20, 0]
]
})
addValues can trigger warnings when used controversially (for example, data overflow).
In production applications, these can be controlled with warnings.
Object itself for fluent interface.
Object with yValues and/or intensityValues matrixes to append on top of previously added data.
Optional intensityOptional yAttach 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 values added into the series.
// Example syntax,
surfaceScrollingGridSeries.clear()
This only affects Y and Intensity data. Other than any styles, etc. this will make the series behave as if it was just created.
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 cull mode for this Surface grid series.
Culling means skipping drawing of specific geometry parts, based on its orientation.
'disabled' -> full geometry is drawn.
'cull-back' -> the behind of geometry is not drawn.
'cull-front' -> the front of geometry is not drawn.
Surface series default cull mode is 'disabled' to show both sides of the surface.
Active cull mode.
Beta
Get override behavior for when this series is formatted to be displayed by a cursor.
Override callback or undefined
Introduced in v6.0.0, the state and definition of this API is not finalized. It may change in future versions without regard to backwards compatibility if there is significant cause from user feedback.
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 surface intensity interpolation mode.
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 existing and/or add new intensity values in the Surface grid. The location along scrolling dimension is identified by a sample index.
Sample index 0 would reference the first sample in the grid, whereas 1 the second sample.
This allows, for example, the modification of previously pushed samples.
This method is also capable of adding new samples into the grid, 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 surface grid in a manner where gaps form between the new samples and previous ones, the gaps are automatically filled by duplicating the previous last surface grid sample!
// Example, modify last sample pushed to surface grid
surfaceSeries.invalidateValues({
iSample: surfaceSeries.getSampleCount() - 1,
yValues: [[0, 0, 0, 0, 0]]
})
// Example, update 5 samples starting at sample index 2
surfaceSeries.invalidateValues({
iSample: 2,
yValues: [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
]
})
Allows modification of Y and intensity values separately.
Object itself.
Object with sample index and intensity or Y values parameters.
Optional intensityOptional yRemove 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 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.
Set Color Shading Style for series.
Shading style changes the visual style of the rendering. See ColorShadingStyles for available shading styles.
Use Simple color shading style:
series3D.setShadingStyle(new ColorShadingStyles.Simple())
Use Phong color shading style:
series3D.setShadingStyle(new ColorShadingStyles.Phong())
Configuring specular highlight for Phong shading style:
series3D.setShadingStyle(new ColorShadingStyles.Phong({
specularReflection: 0.5,
specularColor: ColorRGBA(255, 255, 255)
}))
Object itself for fluent interface.
Color shading style to use for this series.
Set culling of this Surface grid series.
Culling means skipping drawing of specific geometry parts, based on its orientation.
'disabled' -> full geometry is drawn.
'cull-back' -> the behind of geometry is not drawn.
'cull-front' -> the front of geometry is not drawn.
Surface series default cull mode is 'disabled' to show both sides of the surface.
Object itself for fluent interface.
CullMode3D or false | true to disable/enable culling respectively.
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:
Beta
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.
Introduced in v6.0.0, the state and definition of this API is not finalized. It may change in future versions without regard to backwards compatibility if there is significant cause from user feedback.
Override callback or undefined
Set 3D depth test enabled for this series.
By default this is enabled, meaning that any series that is rendered after this series and is behind this series will not be rendered.
Can be disabled to alter 3D rendering behavior.
// Example syntax, disable depth test.
pointSeries3D.setDepthTestEnabled(false)
Object itself for fluent interface.
Depth test enabled?
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 Surface Grid.
Supported fill styles:
Look-up dynamic per-CELL color based on a look up property and a color look up table (LUT).
SurfaceScrollingGridSeries3D supports several different look-up modes:
lookUpProperty: 'value':
Color each CELL based on its INTENSITY value. Cell intensity values can be specified with addValues.
// Example, enable dynamic coloring based on cell intensity data.
surfaceGridSeries
.setFillStyle(new PalettedFill({
lookUpProperty: 'value',
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(0, 0, 0) },
{ value: 100, color: ColorRGBA(255, 0, 0) }
]
})
}))
Note, Surface grid series doesn't currently support color (fallback color).
lookUpProperty: 'x' | 'y' | 'z':
Color each CELL based on one of its axis coordinates.
// Example, enable dynamic coloring based on cell Y coordinate.
surfaceGridSeries
.setFillStyle(new PalettedFill({
lookUpProperty: 'y',
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(0, 0, 0) },
{ value: 100, color: ColorRGBA(255, 0, 0) }
]
})
}))
Intensity based dynamic coloring can further be configured with setIntensityInterpolation to enable or disable automatic interpolation of Intensity values. This is enabled by default.
Solid color for entire Surface Grid fill.
// Example, solid surface grid fill.
heatmapSeries.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
If only wireframe rendering is desired, using emptyFill is recommended for better performance.
Disables Surface Grid fill.
// Example, hide heatmap fill and show wireframe.
heatmapSeries
.setFillStyle(emptyFill)
.setWireframeStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
Related functionality:
Object itself.
FillStyle object or function which modifies current value. Supported FillStyle types: SolidFill, PalettedFill, emptyFill
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
Beta
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.
Released as beta feature in v5.2.0 feature may still change according to user feedback and experiences.
Icon
Set surface intensity interpolation mode.
This only affects surface grid with INTENSITY based dynamic coloring, see setFillStyle for more information.
This feature is enabled by default ('bilinear').
'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.
Surface intensity interpolation mode selection.
Sets the name of the Component updating attached LegendBox entries
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 Z axis.
Object itself.
Coordinate on axis where 1st heatmap sample will be positioned.
Set Step between each consecutive heatmap value on the X and Z Axes.
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 wireframe style of Surface Grid.
Wireframe consists of thin lines drawn around the borders of each surface CELL. They are generally enabled to improve the perception of surface shape.
Wireframe style is defined as LineStyle.
// Example 1, enable wireframe.
heatmapSeries.setWireframeStyle(new SolidLine({
thickness: 1,
fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
}))
// Example 2, disable wireframe.
heatmapSeries.setWireframeStyle(emptyLine)
At this time, only solid wireframe rendering is supported. In future, this could be extended to coloring wireframe based on some dynamic properties (X, Y, Z, Intensity) similarly as surface fill.
Related functionality:
Object itself.
LineStyle object or function which modifies current value.
Match legend entry style to reflect components own style.
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.
Series for visualizing a 3D Surface Grid inside Chart3D, with API for pushing data in a scrolling manner (append new data on top of existing data).
The grid is defined by imagining a plane along X and Z axis, split to < COLUMNS > (cells along X axis) and < ROWS > (cells along Z axis)
The total amount of < CELLS > in a surface grid is calculated as
columns * rows. Each < CELL > can be associated with DATA from an user data set.This series is optimized for massive amounts of data - here are some reference specs to give an idea:
Creating Surface Scrolling Grid Series:
SurfaceScrollingGridSeries3Dare created with addSurfaceScrollingGridSeries method.Some properties of
SurfaceScrollingGridSeries3Dcan only be configured when it is created. Some of these arguments are optional, while some are required. They are all wrapped in a single object parameter:To learn about these properties, refer to SurfaceScrollingGridSeries3DOptions.
Frequently used methods:
SurfaceScrollingGridSeries3Dis designed for visualizing real-time data sources, where either new columns or rows are pushed in periodically.For visualizing 3D surface grid with static columns and rows amount, refer to SurfaceGridSeries3D.