Protected _modelRotation of the model in radians.
Protected _shadingProtected Optional checkedAttach object to an legendBox entry
Object 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.
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 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 FillStyle of MeshModel3D.
Supports following FillStyles:
FillStyle object.
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.
Set BackfaceCullingMode of MeshModel3D.
Object itself.
// Example of setting BackfaceCullingMode
series.setBackfaceCullingMode('disabled')
BackfaceCullingMode
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 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 model fill style.
Can be either SolidFill for solid coloring, or PalettedFill for coloring per-vertex based on values assigned using setVertexValues.
// Example, solid coloring
MeshModel3D.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
// Example, dynamic per-vertex coloring (from random data, probably doesn't look too good)
MeshModel3D
.setFillStyle(
new PalettedFill({
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(0, 0, 0) },
{ value: 1, color: ColorRGBA(255, 0, 0) },
],
}),
})
)
.setVertexValues((vertexLocations) => vertexLocations.map((location) => Math.random()))
See more practical examples of per-vertex coloring in our interactive examples gallery.
Object itself.
FillStyle or function which creates a FillStyle based on previous 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 alignment of the model. Describes which "corner" of the model is positioned at model location (setModelLocation).
Object itself.
Alignment of the model. Units in range [-1, 1].
Method for loading triangulated 3D model geometry data. Please note that LightningChart JS does not include any routines for parsing 3D model files. To display your 3D models with LightningChart, you have to export it to a triangulated file format (such as .OBJ), parse the data and supply list of vertices, indices and optionally normals to LCJS.
As an example, you can use the open-source NPM library webgl-obj-loader to process .OBJ formatted files (supported by almost every 3D Modeling software out there):
// npm i webgl-obj-loader
import { Mesh } from 'webgl-obj-loader'
// Import .obj file as text
const modelOBJ = require('brain.obj').default
const modelParsed = new Mesh(modelOBJ)
const chart3D = lightningChart().Chart3D()
const modelSeries = chart3D.addMeshModel()
.setModelGeometry({
vertices: modelParsed.vertices,
indices: modelParsed.indices,
normals: modelParsed.vertexNormals,
})
See our online examples to see this in practice.
Object itself.
Object containing triangulated 3D model geometry.
Set location of the model.
// Example of setting location of the model
series.setModelLocation({ x: 0, y: 10, z: 0 })
Object itself.
Location in axis coordinates
Set rotation of the model.
Object itself.
// Example of setting rotation of the model
series.setModelRotation({ x: 0, y: 0, z: 90 })
Rotation of the model in degrees
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 scale of the model.
series.setScale(0.1)
series.setScale({ x: 0.1, y: 3, z: 1 })
Object itself.
number for symmetric scale multiplier or object with separate scale multipliers for x, y, z..
Assign number values to each vertex of the model. This can be used for dynamic coloring of the model, when paired with PalettedFill.
// Example, dynamic per-vertex coloring (from random data, probably doesn't look too good)
MeshModel3D
.setFillStyle(
new PalettedFill({
lut: new LUT({
interpolate: true,
steps: [
{ value: 0, color: ColorRGBA(0, 0, 0) },
{ value: 1, color: ColorRGBA(255, 0, 0) },
],
}),
})
)
.setVertexValues((vertexLocations) => vertexLocations.map((location) => Math.random()))
See more practical examples of per-vertex coloring in our interactive examples gallery.
The user supplies a function which is called back with an array of the active Models vertex locations transformed to 3D World coordinates (which can be further translated to axes). This callback function is then used to return a number array which should have a number for every vertex in the model.
The transformation between Model coordinates and World coordinates is invalidated by many effects, like model scale, location, alignment or rotation changing.
After these events it may be necessary to reapply coloring by calling setVertexValues again.
Again, please refer to our online examples for more practical information.
Object itself.
Callback function that supplies the user with array of vertex locations in World coordinate system and expects a number array with same length to be returned.
Set element visibility.
Object itself.
true when element should be visible and false when element should be hidden.
3D Series for rendering a 3D object model within a Chart3D.
Creating MeshModel3D:
MeshModel3Dare created with addMeshModel method.Frequently used methods: