Class Chart3D

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 )

LineSeries3D is optimized for massive amounts of data - here are some reference specs to give an idea:

• A static data set in millions data points range is rendered in hundreds of milliseconds (~200ms). Afterwards chart can be rotated and zoomed with 60 FPS.
• With streaming data, even millions of data points can be streamed in every second, while retaining an interactive document.

To learn more about its features and usage, refer to LineSeries3D.

PointLineSeries3D is optimized for massive amounts of data - here are some reference specs to give an idea:

• A static data set in millions data points range is rendered in hundreds of milliseconds (~200ms). Afterwards chart can be rotated and zoomed with 60 FPS.
• With streaming data, even millions of data points can be streamed in every second, while retaining an interactive document.

To learn more about its features and usage, refer to PointLineSeries3D.

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:

• A static data set in tens of millions range is rendered in a matter of seconds.
• A data set in tens of millions range can be updated in less than a second.
• Maximum data set size is entirely limited by available memory (RAM). Even billion (1 000 000 000) data points have been visualized on a personal computer. Interacting with massive surface charts (more than tens of millions data points) requires a powerful GPU !

To learn more about its features and usage, refer to NewSurfaceGridSeries3D.

Readonly configuration:

Some properties of NewSurfaceGridSeries3D 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 NewSurfaceGridSeries3DOptions.

For scrolling surface grid, see addSurfaceScrollingGridSeries.

To learn more of capabilities and usage, see SurfaceMeshSeries3D

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:

• A data set of tens of millions data points is rendered in a matter of seconds.
• Maximum data set size is entirely limited by available memory (RAM). Even billion (1 000 000 000) data points have been visualized on a personal computer. Interacting with massive surface charts (more than tens of millions data points) requires a powerful GPU !
• Scrolling Surface Grid input stream rate is virtually unlimited - even 10 million incoming data points per second can easily be processed. Application limitations usually come from previously mentioned RAM and/or GPU bottlenecks.

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.

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)

This concerns:

• Axis animations.
• Zoom animation.

It is visualized with a wireframe, as well as 3D Axes on its sides.

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.

The direction is set according to the location of the camera, so that it is facing (0, 0, 0).

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))

This event is triggered whenever the location of Chart3D camera is changed.

This event is triggered whenever the location of Chart3D camera is changed.

handler

Callback function which is triggered on event. Receives two parameters: chart, and cameraLocation.

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)

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:

• Symmetric bounding box

  setBoundingBox( { x: 1.0, y: 1.0, z: 1.0 } )
  

• Bounding box whose Y dimension is 4 times that of the others

  setBoundingBox( { x: 1.0, y: 4.0, z: 1.0 } )
  

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:

• Specify explicit LineStyle object

  Chart3D.setBoundingBoxStrokeStyle(new SolidLine({
     fillStyle: new SolidFill({ color: ColorHEX('#61ff61') }),
     thickness: 5
  }))
  

• Modify default style

  // Default value is SolidLine (note that a soft type cast is required for *TypeScript*).
  Chart3D.setBoundingBoxStrokeStyle(( line: SolidLine ) => line
     .setThickness( 10 )
  )
  

The camera always faces (0, 0, 0) coordinate.

The light source is always a set distance behind the camera.

Affects rotation and zooming. Same as calling both setMouseInteractionZoom and setMouseInteractionRotate.

 // Example usage,
 Chart3D.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 60, 0, 0 ) }))

Related API:

• Use SolidFill to describe a solid fill color.
• Use ColorRGBA to create a color from Red, Green, Blue (and optionally) Alpha values in range [0, 255].

 // Example usage,
 Chart3D.setSeriesBackgroundStrokeStyle(new SolidLine({
     thickness: 2,
     fillStyle: new SolidFill({ color: ColorRGBA( 0, 255, 0 ) })
 }))

Related API:

• Use SolidLine to describe a solid line style.
• Use SolidFill to describe a solid fill color.
• Use ColorRGBA to create a color from Red, Green, Blue (and optionally) Alpha values in range [0, 255].