Skip to main content
Version: 7.1.2

Box

3D feature for rendering a collection of 3D boxes with individual locations and sizes.

// Creation of a box series
const boxSeries = chart.addBoxSeries()

3D box chart3D box chart

Adding data​

Boxes are inputted with invalidateData method:

boxSeries.invalidateData([
    { xCenter: 0, yCenter: 0, zCenter: 0, xSize: 1, ySize: 1, zSize: 1 }
])

Alternatively, you can define boxes using min-max syntax:

boxSeries.invalidateData([
    { xMin: 0, xMax: 1, yMin: 0, yMax: 1, zMin: 0, zMax: 1 }
])

Editing data​

Editing data of previously specified boxes is possible by assigning IDs to boxes:

boxSeries.invalidateData([
    { id: 0, xMin: 0, xMax: 1, yMin: 0, yMax: 1, zMin: 0, zMax: 1 }
])
// ... edit previously created box
boxSeries.invalidateData([
    { id: 0, xMin: 0, xMax: 1, yMin: 0, yMax: 3, zMin: 0, zMax: 1 }
])

Box color​

boxSeries.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

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

Rounded boxes​

boxSeries.setRoundedEdges(0.2)
boxSeries.setRoundedEdges(undefined)

Individual box colors​

Boxes can be colored individually by setting fill style to IndividualPointFill and including color property for each box:

const colorRed = ColorRGBA(255, 0, 0)
boxSeries
    .setFillStyle(new IndividualPointFill())
    .invalidateData([
        { xMin: 0, xMax: 1, yMin: 0, yMax: 1, zMin: 0, zMax: 1, color: colorRed }
    ])

Color by lookup table​

Alternative approach to individual colors, you can give each box a number value, and specify rules for getting a color from any number:

boxSeries
    .setFillStyle(new PalettedFill({
        lookUpProperty: 'value',
        lut: new LUT({
            interpolate: true,
            steps: [
                { value: 0, color: ColorCSS('red') },
                { value: 100, color: ColorCSS('green') },
            ]
        })
    }))
    .invalidateData([
        { xMin: 0, xMax: 1, yMin: 0, yMax: 1, zMin: 0, zMax: 1, value: 100 }
    ])

Color by X, Y or Z​

Instead of using lookup values in data set, you can also use X, Y or Z coordinates directly, by changing the lookUpProperty value in PalettedFill.

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

3D color shading​

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

Depth testing​

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

Interactions with data points​

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