Skip to main content
Version: 8.3.2

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.

Projection​

By default, Chart3D uses a perspective projection (objects farther away are smaller). Alternatively, orthographic projection is also supported.

chart.setProjection('orthographic')

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​

3D chart user interactions can be configured with setUserInteractions method. Here you can find a handful of most commonly required examples. For more information, please see generic documentation about setUserInteractions.

At time of writing, Chart3D comes with following set of available built-in user interactions:

  • Rotate camera (by dragging mouse or via pinch with touch devices)
  • Zoom camera (by mouse wheel)
  • Panning axes (by dragging mouse, using mouse wheel or via pinch with touch devices)
  • Zooming axes (by dragging mouse, using mouse wheel or via pinch with touch devices)
  • Restore default view (double click or keyboard)
  • Restore previous view (double click or keyboard)

With touch devices, users can freely zoom and pan any X/Y/Z axis individually. This is done by placing 2 fingers on the chart. The closest axis that aligns with the fingers initial location is selected. Pinching allows zoom in/out while moving the fingers allows panning.

Example: disable all user interactions​

chart.setUserInteractions(undefined)

Example: mouse wheel zoom Y axis always​

There are so many different ways user may want interactions to work in 3D charts. Furthermore compared to XY charts, it is basically impossible to make correct assumptions based on the chart structure. For this reason, the setUserInteractions method allows very detailed control of interaction behavior.

// Example, zoom Y axis only on mouse wheel, keeping axis start stationary.
chart.setUserInteractions({
    zoom: {
        camera: false,
        wheel: {},
        x: false,
        y: true,
        z: false,
        mode: 'keep-start',
    },
})

Example: zooming on all X,Y,Z axes​

// Example, zoom X when ctrl is pressed, Y when shift is pressed and Z when alt is pressed 
chart3D.setUserInteractions({
    zoom: {
        ctrl: { camera: false, x: true, y: false, z: false },
        shift: { camera: false, x: false, y: true, z: false },
        alt: { camera: false, x: false, y: false, z: true },
    },
})

For more information about user interactions, please see generic documentation about setUserInteractions.

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 cursors work otherwise same as in other charts, except they are only activated when users pointer is directly above a component (i.e. there is no "solve nearest" functionality).

Please see common Cursors section for more information.

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.