Line

// Creation of a 3D line series
const lineSeries = chart.addLineSeries()

Adding data

Most 3D series types accept data as a list of JS objects with x, y and z number properties.

lineSeries.add([
    { x: 0, y: 0, z: 0 },
    { x: 1, y: 3, z: 0 },
    { x: 2, y: 2, z: 0 },
    { x: 3, y: 5, z: 0 },
    { x: 4, y: 6, z: 0 },
])

A common user problem is that data is supplied as string instead of number - please confirm this if you are experiencing any strange issues.

console.log(typeof y) // ---> 'number'

Editing or clearing data

lineSeries.clear()

3D line series does not have any convenience method for editing a range of existing data. To edit displayed data set, clear and re-specify full data set.

Using timestamps

This section works the same as for 2D Line, to avoid duplication of guides, please refer to the section under Line 2D

Data cleaning / maximum memory use

3D line series does not have built-in functionality for automatic data cleaning. If your use case requires this functionality, then please get in touch.

Changing stroke color

const fillRed = new SolidFill({ color: ColorRGBA(255, 0, 0, 255) })
lineSeries.setStrokeStyle((stroke) => stroke.setFillStyle(fillRed))

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

Changing stroke thickness

lineSeries.setStrokeStyle((stroke) => stroke.setThickness(1))

3D series pixel sizes vary based on zoom level. To get stroke thickness of 1 pixels regardless of zoom level, you can set thickness to exactly -1:

// Enable primitive line rendering - always 1 px, also considerably lighter on GPU.
lineSeries.setStrokeStyle((stroke) => stroke.setThickness(-1))

Dashed line series

3D line series does not currently support dashed stroke. If your use case requires this functionality, then please get in touch.

Data gaps

This section works the same as for 2D Line, to avoid duplication of guides, please refer to the section under Line 2D

Color by X or Y

lineSeries.setStrokeStyle((stroke) => stroke.setFillStyle(
    new PalettedFill({
        lookUpProperty: 'y', // 'x', 'y' or 'z'
        lut: new LUT({
            interpolate: true,
            steps: [
                { value: 0, color: ColorCSS('red') },
                { value: 100, color: ColorCSS('green') },
            ]
        })
    })
))

3D color shading

By default, 3D series are using shaded 3D color graphics. This means that the color of surfaces vary on perceived angle, giving a sense of depth and surface shape. This can be disabled to color every part of a series with a solid color, similar to 2D graphics:

// Disable 3D color shading
lineSeries.setColorShadingStyle(new ColorShadingStyles.Simple())

Depth testing

By default, WebGL depth testing is enabled. This means that any other 3D data that is drawn after a series AND is behind that series in the chart will not be rendered on the screen to save GPU processing. Normally, this is no concern. However, when visualizing transparent 3D objects this may result in unexpected visual results (objects missing from scene). Depth testing can be disabled with setDepthTestEnabled.

lineSeries.setDepthTestEnabled(false)

Interactions with data points

All series support tracking user interactions:

lineSeries.addEventListener('click', (event, hit) => {
    // hit.x
    // hit.y
    // hit.z
    console.log(hit)
})

For all available events to track, please see API