Readonly
axes3D Coordinate system selector to use with translatePoint3D function, which lets users translate coordinates between different 3D coordinate systems.
// Example, translate coordinate from Chart3D Axes to World Space.
const coordWorld = translatePoint3D(
// Coordinate on Axes.
{ x: 10, y: 5, z: 25 },
// Source coordinate system.
chart3D.axes,
// Target coordinate system.
chart3D.world
)
The axes
selector describes the coordinate system of 3D charts Axes (X, Y, Z).
About 3D coordinate systems:
Chart3D
camera location is configured in World Space, which is currently the primary reason for interacting with different 3D coordinate systems.
For example, depth sorting of transparent objects by rendering data based on their distance to the camera.
Depth sorting is required for blending stacked transparent objects.
Readonly
engineInterface for end user API of the LCJS engine. It provides some useful capabilities over the area enclosed by a single LCJS context (which can be just a single chart, or a Dashboard with several charts).
Scale for panel area in pixels.
Scale for panel area in percentages (0-100).
Readonly
world3D Coordinate system selector to use with translatePoint3D function, which lets users translate coordinates between different 3D coordinate systems.
// Example, translate coordinate from Chart3D Axes to World Space.
const coordWorld = translatePoint3D(
// Coordinate on Axes.
{ x: 10, y: 5, z: 25 },
// Source coordinate system.
chart3D.axes,
// Target coordinate system.
chart3D.world
)
The world
selector describes 3D World Space.
3D world space is used for camera positioning, is centered at [0, 0, 0] and values generally range between += 5.
About 3D coordinate systems:
Chart3D
camera location is configured in World Space, which is currently the primary reason for interacting with different 3D coordinate systems.
For example, depth sorting of transparent objects by rendering data based on their distance to the camera.
Depth sorting is required for blending stacked transparent objects.
Create Series for visualization of large sets of individually configurable 3D Boxes.
Example usage:
// Construct a grid of vertical boxes.
const data = [
{ x: 0, z: 0 },
{ x: 1, z: 0 },
{ x: 0, z: 1 },
{ x: 1, z: 1 }
]
// Map coords into **BoxData**.
.map( coords => {
const height = Math.random() * 100
return {
xCenter: coords.x,
yCenter: height / 2,
zCenter: coords.z,
xSize: 1,
ySize: height,
zSize: 1
}
})
const chart = lightningChart().Chart3D()
const boxSeries = chart.addBoxSeries()
.invalidateData( data )
BoxSeries3D.
Add a legendbox.
Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.
The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.
Legendbox alignment:
Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox
:
// Default (vertical) LegendBox.
const legendBox = ChartXY.addLegendBox()
// Horizontal LegendBox.
const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
Custom Legendbox positioning:
By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).
A custom location can be configured with UIElement API:
Position coordinate system is specified when creating legendbox.
addLegendBox( LegendBoxBuilders.VerticalLegendBox )
// Position = [0, 100] as percentages.
.setPosition({ x: 50, y: 50 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.pixelScale )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
LegendBox
LegendBoxBuilder. If omitted, VerticalLegendBox will be selected. Use LegendBoxBuilders for selection.
Optional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in percentages [0, 100].
Method for adding a new LineSeries3D
to the chart.
This Series type for visualizing a collection of { x, y, z }
coordinates by a continuous line stroke.
LineSeries3D
is optimized for massive amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to LineSeries3D.
New series.
Method for adding a new PointLineSeries3D
to the chart.
This Series type for visualizing a collection of { x, y, z }
coordinates by a continuous line stroke and markers.
PointLineSeries3D
is optimized for massive amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to PointLineSeries3D.
New series.
Method for adding a new PointSeries3D
to the chart.
This series type for visualizing a collection of { x, y, z }
coordinates by different markers.
PointSeries3D
is optimized for massive amounts of data - here are some reference specs to give an idea:
To learn more about its features and usage, refer to PointSeries3D.
Readonly configuration:
Some properties of PointSeries3D
can only be configured when it is created. These arguments are all optional,
and are wrapped in a single object parameter:
// Example,
const pointCloudSeries3D = Chart3D.addPointSeries({
// Specify point series type as point cloud.
type: PointSeriesTypes3D.Pixelated
})
To learn about available properties, refer to PointSeriesOptions3D.
New series.
Optional
options: PointSeriesOptions3D<T>Optional object with readonly configuration arguments for PointSeries3D
.
Add a Series for visualizing a Surface Grid with a static column and grid count. Has API for fast modification of cell Y and Intensity values.
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:
To learn more about its features and usage, refer to SurfaceGridSeries3D.
Readonly configuration:
Some properties of SurfaceGridSeries3D
can 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 SurfaceGridSeries3DOptions.
For scrolling surface grid, see addSurfaceScrollingGridSeries.
Surface Grid Series.
Configuration parameters for Surface Grid Series.
Add a Series for visualizing a Surface Grid 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:
To learn more about its features and usage, refer to SurfaceScrollingGridSeries3D.
Readonly configuration:
Some properties of SurfaceScrollingGridSeries3D
can 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 surfaceScrollingGridSeries = Chart3D.addSurfaceScrollingGridSeries({
columns: 100,
rows: 200,
})
To learn about these properties, refer to SurfaceScrollingGridSeries3DOptions.
For static surface grid, see addSurfaceGridSeries.
Surface Scrolling Grid Series.
Configuration parameters for Surface Scrolling Grid Series.
Add a stand-alone UIElement using a builder.
Example usage:
addUIElement( UIElementBuilders.TextBox )
// Position = [0, 100] as percentages.
.setPosition({ x: 50, y: 50 })
addUIElement( UIElementBuilders.TextBox, chart.pixelScale )
// Position = pixels.
.setPosition({ x: 300, y: 100 })
addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
// Position = Axis values.
.setPosition({ x: 5, y: 5 })
Object that fulfills interfaces: UIElementType (typeparam) and UIElement
Type of UIElement that is specified by 'builder'-parameter.
UIElementBuilder. If omitted, TextBoxBuilder will be selected. Use UIElementBuilders for selection.
Optional parameter for altering the coordinate system used for positioning the UIElement. Defaults to whole Chart in percentages [0, 100].
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
Convenience method to get a tuple of the Charts X, Y and Z axes.
Equal to [Chart3D.getDefaultAxisX(), Chart3D.getDefaultAxisY(), Chart3D.getDefaultAxisZ()]
Intended for conveniently applying same modifications to all axes.
// Example, disable mouse interactions from all axes.
Chart3D.getDefaultAxes().forEach((axis) => axis.setMouseInteractions(false))
[Chart3D.getDefaultAxisX(), Chart3D.getDefaultAxisY(), Chart3D.getDefaultAxisZ()]
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 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 font of Chart title.
FontSettings object
Unsubscribe from camera change event.
This event is triggered whenever the location of Chart3D
camera is changed.
True if the listener is successfully removed and false if it is not found
Token which was received from onCameraChange.
Subscribe to mouse-click event on Chart background
Subscribe to mouse-doubleClick event on Chart background
Subscribe to mouse-down event on Chart background
Subscribe to mouse-drag event on Chart background
Subscribe to mouse-drag start event on Chart background
Subscribe to mouse-drag stop event on Chart background
Subscribe to mouse-enter event on Chart background
Subscribe to mouse-leave event on Chart background
Subscribe to mouse-move event on Chart background
Subscribe to mouse-up event on Chart background
Subscribe to mouse-wheel event on Chart background
Subscribe to touch-end event on Chart background
Subscribe to touch-move event on Chart background
Subscribe to touch-start event on Chart background
Subscribe to camera change event.
This event is triggered whenever the location of Chart3D
camera is changed.
Token which can be used with offCameraChange to unsubscribe the event handler.
Subscribe onDispose
event.
This event is triggered whenever the Control (Dashboards and all chart types) is disposed.
// Example usage
Chart.onDispose(() => {
console.log('chert was disposed')
})
Chart.dispose()
Token of subscription
Subscribe to resize
event.
This event is triggered whenever the area of chart changes (due to document or dashboard resizing).
// Example usage,
ChartXY.onResize((chart, width, height, engineWidth, engineHeight) => {
console.log('Chart resized', 'width', width, 'height', height, 'engineWidth', engineWidth, 'engineHeight', engineHeight)
})
Token of subscription
Handler function for event
Subscribe to mouse-click event on Series Background
Subscribe to mouse-doubleClick event on Series Background
Subscribe to mouse-down event on Series Background
Subscribe to mouse-drag event on Series Background
Subscribe to mouse-drag start event on Series Background
Subscribe to mouse-drag stop event on Series Background
Subscribe to mouse-enter event on Series Background
Subscribe to mouse-leave event on Series Background
Subscribe to mouse-move event on Series Background
Subscribe to mouse-up event on Series Background
Subscribe to mouse-wheel event on Series Background
Subscribe to touch end event on Series Background
Subscribe to touch move event on Series Background
Subscribe to touch start event on Series Background
Capture rendered state in an image file. Prompts the browser to download the created file.
NOTE: The download might be blocked by browser/plugins as harmful. To prevent this, only call the method in events tied to user-interactions. From mouse-event handlers, for example.
Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL. For supported image formats, compression quality, Etc. refer to:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Example usage:
// Download 'screenshot.png'
Panel.saveToFile('screenshot')
// Attempt download 'maybeNotSupported.bmp'
Panel.saveToFile('maybeNotSupported', 'image/bmp')
// Attempt download jpeg.file with specified compression quality
Panel.saveToFile('fileName', 'image/jpeg', 0.50)
If 'type' is not supported by browser, an Error will be thrown.
Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.
Optional
type: stringA DOMString indicating the image format. The default format type is image/png.
Optional
encoderOptions: numberA Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92.
Set Chart3D zoom animation enabled.
When enabled, zooming with mouse wheel or trackpad will include a short animation.
This is enabled by default.
// Example syntax, disable zoom animation.
chart3D.setAnimationZoom(false)
Chart itself for fluent interface.
Boolean.
Disable/Enable all animations for the chart.
Affects:
Chart itself for fluent interface.
Boolean value to enable/disable all animations
Set FillStyle of chart background.
// Example usage,
ChartXY.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))
Related API:
Transparent chart backgrounds:
LightningChart JS charts can be configured to be fully or partially transparent.
// Example, partially transparent chart
// Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
chart.engine.setBackgroundFillStyle(emptyFill)
// Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
// Some charts also have a separate series background.
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
Object itself
FillStyle
or function which mutates the active FillStyle
.
Set LineStyle of chart background border stroke.
// Example usage,
ChartXY.setBackgroundStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
}))
Related API:
Object itself
LineStyle
or function which mutates the active LineStyle
.
Set the dimensions of the Scenes bounding box.
The bounding box is a visual reference that all the data of the Chart is depicted inside of. The Axes of the 3D chart are always positioned along the sides of the bounding box.
Example usage:
setBoundingBox( { x: 1.0, y: 1.0, z: 1.0 } )
setBoundingBox( { x: 1.0, y: 4.0, z: 1.0 } )
Object itself for fluent interface
Dimensions of bounding box. These values do not represent any "unit", only their relative ratios are considered.
Set style of 3D bounding box.
The bounding box is a visual reference that all the data of the Chart is depicted inside of. The Axes of the 3D chart are always positioned along the sides of the bounding box.
Example usage:
Chart3D.setBoundingBoxStrokeStyle(new SolidLine({
fillStyle: new SolidFill({ color: ColorHEX('#61ff61') }),
thickness: 5
}))
// Default value is SolidLine (note that a soft type cast is required for *TypeScript*).
Chart3D.setBoundingBoxStrokeStyle(( line: SolidLine ) => line
.setThickness( 10 )
)
Object itself for fluent interface.
Set the location of camera in World Space, a coordinate system that is not tied to 3D Axes.
The camera always faces (0, 0, 0) coordinate.
The light source is always a set distance behind the camera.
Camera location in 3D space. Valid values are in the range [1, 5]. Note, that placing the camera too close to the bounding box is restricted.
Set all mouse-interaction flags at once.
Affects rotation and zooming. Same as calling both setMouseInteractionZoom and setMouseInteractionRotate.
Object itself
Are mouse-interactions enabled
Set padding around Chart in pixels.
// Example 1, specify complete padding (four sides).
ChartXY.setPadding({ left: 16, right: 16, top: 32, bottom: 8 })
// Example 2, specify only single padding.
ChartXY.setPadding({ right: 64 })
Object itself
Number with pixel margins for all sides or datastructure with individual pixel paddings for each side. Any side can be omitted, only passed values will be overridden.
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 FillStyle of series background (area behind series).
// Example usage,
ChartXY.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 60, 0, 0 ) }))
Related API:
Transparent chart backgrounds:
LightningChart JS charts can be configured to be fully or partially transparent.
// Example, partially transparent chart
// Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
chart.engine.setBackgroundFillStyle(emptyFill)
// Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
// Some charts also have a separate series background.
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
Object itself
FillStyle
or function which mutates the active FillStyle
.
Set LineStyle of series background border stroke.
// Example usage,
ChartXY.setSeriesBackgroundStrokeStyle(new SolidLine({
thickness: 2,
fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
}))
Related API:
Object itself
LineStyle
or function which mutates the active LineStyle
.
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 Chart Title.
Example usage:
// Create a new style
Chart.setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
// Change transparency
Chart.setTitleFillStyle((solidFill) => solidFill.setA(80))
// Set hidden
Chart.setTitleFillStyle(emptyFill)
Chart itself
Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
Set font of Chart Title.
Example usage:
// Create a new FontSettings
Chart.setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
// Change existing settings
Chart.setTitleFont((fontSettings) => fontSettings.setWeight('bold'))
Chart itself
Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
Specifies padding after chart title.
This does not have an effect if title is hidden (empty FillStyle).
// Example 2, specify margins for all sides with same value for Title.
ChartXY.setTitleMargin(40)
Chart itself for fluent interface
Gap after the chart title in pixels.
Chart for visualizing data in a 3-dimensional scene, with camera and light source(s).
Camera can be moved around with user interactions (mouse & touch). It is always oriented to face the center of the scene.
Light source is always located at the location of the Camera, and directed towards the center of Axes.
Data can be added to the Chart via various Series types, each with their own method of visualization: