Public, safe interface for Panels rendering engine.
Scale for panel area in pixels. Margin should be set according to panel margin (currently constant).
Scale for panel area in percentages (0-100). Margin should be set according to panel margin (currently constant).
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 stand-alone LegendBox using a builder.
Type of UIElement that is specified by 'builder'-parameter.
LegendBoxBuilder. If omitted, HorizontalLegendBox will be selected. Use LegendBoxBuilders for selection.
Optional custom scale to position LegendBox on. Defaults to whole chart in percentages [0, 100].
LegendBox that fulfills interfaces: UIElementType (typeparam) and UIElement
Create Series for visualization of data by lines connected between data points.
LineSeries3D.
Create Series for visualization of data by lines connected between data points as well as shapes rendered on the data points.
PointLineSeries3D.
Create Series for visualization of data by different shapes.
Example usage:
By default, creates PointSeries3D
const pointSeries3D = Chart3D.addPointSeries()By specifying options object with type-property, the returned Series' class can be selected
const pointCloudSeries3D = Chart3D.addPointSeries({
type: PointSeriesTypes3D.Pixelated
})Optional object for passing readonly parameters to configure the created Series.
Created Series. If options were omitted or undefined, the Series type defaults to PointSeries3D, otherwise corresponds to class referenced by options.type.
Create Series for visualization of data by surfaces.
Example usage:
By default, creates SurfaceGridSeries3D
const gridSurface3D = Chart3D.addSurfaceSeries()By specifying options object with type-property, the returned Series' class can be selected
const meshSurface3D = Chart3D.addSurfaceSeries({
type: SurfaceSeriesTypes3D.Mesh
})The easiest way to define Surface geometry is to invalidate it via a callback function
const resolution = 20
const grid = chart3D.addSurfaceSeries( {
type: SurfaceSeriesTypes3D.Grid,
rows: resolution,
columns: resolution,
start: { x: 0, z: 0 },
end: { x: 100, z: 100 },
pixelate: true
} )
.invalidateYOnly( ( row, column, prev ) => {
return Math.sin( row * 2 * Math.PI / resolution )
} )
.setFillStyle( new PalettedFill( {
// Refer to "palette" examples for LUT creation.
lut,
lookUpProperty: 'y'
} ) )Optional object for passing readonly parameters to configure the created Series.
Created Series. If options were omitted or undefined, the Series type defaults to SurfaceGridSeries3D, otherwise corresponds to class referenced by options.type.
Add a stand-alone UIElement using a builder.
Type of UIElement that is specified by 'builder'-parameter.
UIElementBuilder. If omitted, TextBoxBuilder will be selected. Use UIElementBuilders for selection.
Optional custom scale to position UIElement on. Defaults to whole chart in percentages [0, 100].
Object that fulfills interfaces: UIElementType (typeparam) and UIElement
Disable all animations for the chart.
After calling this function, animations (Zooming, scaling) for all Axes will be disabled. Animations must be recreated manually afterwards.
Chart itself for fluent interface.
Permanently dispose 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 = undefinedObject itself for fluent interface
Operate on each axis of chart, x and y
Callback function for axis
Get fillstyle of chart background.
FillStyle
Get stroke style of chart background.
LineStyle
Get dimensions of Scenes "bounding box". Bounding box defines the space allocated for the Charts 3D Axes.
It is visualized with a wireframe, as well as 3D Axes on its sides.
Dimensions of bounding box as World Units.
Get the direction of camera in 3D space.
The direction is set according to the location of the camera, so that it is facing (0, 0, 0).
Camera direction in 3D space. Always an unit vector.
Get the location of camera in 3D space.
Camera location in 3D space.
Get Axis X.
Axis3D object.
Get Axis Y.
Axis3D object.
Get Axis Z.
Axis3D object.
Get if mouse and cursor interactions are disabled during scrolling animations for the chart's series.
True if interactions with series are disabled, false if not.
Get padding around Chart in pixels.
Padding datastructure
Get text of Chart title.
Chart title as a string.
Get fill style of Chart Title.
FillStyle object
Get font of Chart title.
FontSettings object
Padding after Chart title
Padding before Chart title
Remove event listener from resize 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 resize event of Panel.
Handler function for event
Token of subscription
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)Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.
A DOMString indicating the image format. The default format type is image/png.
A 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 fillStyle of panel background.
FillStyle or function which modifies it
Object itself
Set stroke style of panel background.
LineStyle or function which modifies it
Object itself
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 } )Dimensions of bounding box. These values do not represent any "unit", only their relative ratios are considered.
Object itself for fluent interface
Set the location of camera in 3D space.
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 if mouse and cursor interactions should be disabled during scrolling animations for the chart's series.
True if mouse and cursor interactions should be disabled during scrolling animations, false if not.
Chart itself for fluent interface.
Set padding around Chart in pixels.
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.
Object itself
Set the state for all Series in the Chart to highlight on mouse hover.
True if all Series should be highlighted on mouse hover, false if not.
Object itself for fluent interface.
Set text of Chart title.
Chart title as a string.
Object itself for fluent interface.
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)Either a FillStyle object or a function, which will be used to create a new FillStyle based on current value.
Chart itself
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'))Either a FontSettings object or a function, which will be used to create a new FontSettings based on current value.
Chart itself
Specifies padding after chart title.
This does not have an effect if title is hidden (empty FillStyle).
Gap after the chart title in pixels.
Chart itself for fluent interface
Specifies padding before chart title.
This does not have an effect if title is hidden (empty FillStyle).
Gap between the top of chart and its title in pixels.
Chart itself for fluent interface
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:
const pointLineSeries3D = chart3D.addPointLineSeries() .add( [ { x: 0, y: 0, z: 0 }, { x: 1, y: 0, z: 0 }, { x: 2, y: 1, z: 0 } ] )