Skip to main content
Version: 5.2.0

3D Chart

Chart3D is a collection of series, axes and other chart components. It can be used to create an incredible number of different 3D data visualization elements.

// Creation of Chart3D
const lc = lightningChart()
const chart = lc.Chart3D()

3D chart3D chart

Chart title​

chart
    .setTitle('Voltage')
    .setTitleFont(font => font.setSize(10).setFamily('Segoe UI'))
    .setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts.

Background style​

Chart3D has 3 different levels of backgrounds:

  • Series background (area enclosed by axes)
  • Chart background (entire chart area)
  • Engine background (additional background shared by entire engine)
    • Understanding difference between chart/engine background is mainly useful if you are using the legacy Dashboard feature - in this case, engine background is shared across the whole dashboard.
chart
    .setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
    .setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 255) }) }))
chart.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

For more details about style API, please see Styles, colors and fonts.

Bounding box style​

chart.setBoundingBoxStrokeStyle(new SolidLine({ thickness: 1, fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }) }))

For more details about style API, please see Styles, colors and fonts.

Bounding box dimensions​

By default, Chart3D coordinate system is placed in a symmetrical 3D cube. This can be changed by configuring the relative ratios between the coordinate systems Y size compared to X for example: 

chart.setBoundingBox({ x: 2, y: 1, z: 2 })

3D chart3D chart

Disable animations​

const chart = lc.Chart3D({ animationsEnabled: false })

User interactions​

Built-in user interactions can be disabled individually, or all at once:

chart.setMouseInteractionRotate(false)
chart.setMouseInteractionZoom(false)
chart.setMouseInteractions(false)

Custom user interactions can be implemented using the Events API:

chart.onSeriesBackgroundMouseClick((_, event) => {
    console.log('user clicked series area', event)
})

Camera angle and distance​

Camera angle and viewpoint can be controlled with setCameraLocation method:

chart.setCameraLocation({ x: 0.52, y: 0.33, z: 1.06 })
chart.setCameraLocation({ x: 0.91, y: 1.07, z: 0.43 })

By default, this only controls the location of the camera. It always points towards the center of the scene at a preset distance away from the center.

If control over camera distance is needed, then setCameraAutomaticFittingEnabled method can be used:

chart
    .setCameraAutomaticFittingEnabled(false)
    .setCameraLocation({ x: 1.8, y: 2.0, z: 0.8 })

Coordinate translations​

LightningChartJS has a number of different coordinate systems that are not natively present on a web page - most importantly, the charts Axes.

In many data visualization use cases it is critical to add annotations or markers at specific coordinates along the Axes and data series. Because of this, the ability to translate between coordinates on the web page and the axes is critical.

In this context, "client" refers to the Web API Client coordinate system.

Translating client coordinate to Axis​

Chart3D currently doesn't have a method for translating between client coordinates (2D) and 3D axes. If your use case requires this functionality, then please get in touch and we'll arrange it.

Translating Axis coordinate to client​

Chart3D currently doesn't have a method for translating between client coordinates (2D) and 3D axes. If your use case requires this functionality, then please get in touch and we'll arrange it.

World coordinate system​

Some elements of Chart3D are positioned in so called "world coordinates", such as the 3D camera and 3D mesh model vertices. World coordinates can be translated to 3D axis locations and vice versa.

const locWorld = { x: 0, y: 0, z: 0 }
const locAxis = chart.translateCoordinate(locWorld, chart.coordsWorld, chart.coordsAxis)

Cursors​

Chart3D currently has no built-in cursor functionality. If your use case requires 3D cursors, then please get in touch and we'll arrange it.

Axis​

Please see common Axis section.

Legend​

Please see common Legend section.

Positioning charts​

Please see common Positioning charts section.

Color themes​

Please see common Color themes section.