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
Tell the owning chart to remove this component.
Object itself.
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 the currently used ColorShadingStyle.
The Color Shading Style for the series.
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.
Get 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.
Depth test enabled?
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 surface intensity interpolation mode.
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 surface grid wireframe style.
LineStyle object.
Max X value of the series
Min X value of the series
Max Y value of the series
Min Y value of the series
Max Z value of the series
Min Z value of the series
Invalidate range of surface HEIGHT values starting from first column and row. These values correspond to coordinates along the Y axis.
See the other overload of this method for invalidating a surface grid section which doesn't start from the first column and row.
// Example, 3x3 surface full invalidation.
const surfaceGridSeries = Chart3D.addSurfaceGridSeries({
dataOrder: 'columns',
columns: 3,
rows: 3
})
surfaceGridSeries.invalidateHeightMap([
// Column 1 height (Y) values.
[0, 0, 0],
// Column 2 height (Y) values.
[1, 1, 1],
// Column 3 height (Y) values.
[0, 2, 0],
])
Data interpretation basis is defined by NewSurfaceGridSeries3DOptions.dataOrder property from when the series was created. Can be either list of columns, or list of rows.
invalidateHeightMap can trigger warnings when used controversially.
In production applications, these can be controlled with LightningChartOptions.warnings.
Matrix (array of arrays) of height values.
Object itself for fluent interface.
Invalidate a partial range of surface HEIGHT values. These values correspond to coordinates along the Y axis.
// Example, 100x10 surface invalidate partial section of surface.
const surfaceGridSeries = Chart3D.addSurfaceGridSeries({
dataOrder: 'columns',
columns: 100,
rows: 10
})
surfaceGridSeries.invalidateHeightMap({
// Index of first invalidated column.
iColumn: 50,
// Index of first invalidated row.
iRow: 2,
// Height (Y) values matrix. It's dimensions imply the amount of invalidated columns & rows.
values: [
// 1st invalidated column height (Y) values.
[1, 1, 1, 1, 1],
// 2nd invalidated column height (Y) values.
[2, 2, 2, 2, 2],
// 3rd invalidated column height (Y) values.
[1, 0, 0, 0, 1],
// 4th invalidated column height (Y) values.
[0, 1, 0, 1, 0],
// 5th invalidated column height (Y) 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 height (Y) value matrix, iColumn the first affected column and iRow the first affected row.
Object itself for fluent interface.
Invalidate range of surface INTENSITY values starting from first column and row, updating coloring if a Color look up table (LUT) has been attached to the series (see NewSurfaceGridSeries3D.setFillStyle).
See the other overload of this method for invalidating a surface grid section which doesn't start from the first column and row.
// Example, 3x3 surface full invalidation.
const surfaceGridSeries = Chart3D.addSurfaceGridSeries({
dataOrder: 'columns',
columns: 3,
rows: 3
})
surfaceGridSeries.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 NewSurfaceGridSeries3DOptions.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 (array of arrays) of intensity values.
Object itself for fluent interface.
Invalidate a partial range of surface INTENSITY values, updating coloring if a Color look up table (LUT) has been attached to the series (see NewSurfaceGridSeries3D.setFillStyle).
// Example, 100x10 surface invalidate partial section of surface.
const surfaceGridSeries = Chart3D.addSurfaceGridSeries({
dataOrder: 'columns',
columns: 100,
rows: 10
})
surfaceGridSeries.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, iColumn the first affected column and iRow the first affected row.
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 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 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 component.
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.
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)
}))
Color shading style to use for this series.
Object itself for fluent interface.
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.
CullMode3D or false | true to disable/enable culling respectively.
Object itself for fluent interface.
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)
Depth test enabled?
Object itself for fluent interface.
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).
NewSurfaceGridSeries3D supports several different look-up modes:
lookUpProperty: 'value':
Color each CELL based on its INTENSITY value. Cell intensity values can be specified with invalidateIntensityValues.
// 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) }
]
})
}))
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:
FillStyle object or function which modifies current value. Supported FillStyle types: SolidFill, PalettedFill, emptyFill
Object itself.
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 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.
Surface intensity interpolation mode selection.
Object 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 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:
LineStyle object or function which modifies current value.
Object itself.
Series for visualizing a 3D Surface Grid inside Chart3D.
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 Grid Series:
NewSurfaceGridSeries3Dare created with Chart3D.addSurfaceGridSeries method.Some properties of
NewSurfaceGridSeries3Dcan 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:// Example, const surfaceGridSeries = Chart3D.addSurfaceGridSeries({ columns: 100, rows: 200, })To learn about these properties, refer to NewSurfaceGridSeries3DOptions.
Frequently used methods:
dispose| restoreNewSurfaceGridSeries3Dis suitable for visualizing a surface with unchanging locations along X and Z axes.For visualizing continuous sampling in 3D surface, refer to SurfaceScrollingGridSeries3D.