JavaScript 3D Box Series rounded edges

This example shows an animated 3D Bar Chart with bars coloured dynamically based on their height.

The Chart is rendered using BoxSeries3D, a series type capable of rendering any number of Boxes as well as allowing individual full level modification (location, size, color) at any point during runtime.

The example also showcases the rounded edges feature. While enabled by default, it can be adjusted and disabled at any time with BoxSeries3D.setRoundedEdges

BoxSeries3D data format

BoxSeries3D supports input data in two different formats, namely:

  • BoxDataCentered (specify Box center coordinate and size)
  • BoxDataBounds (specify Box start and end coordinates)

On top of this geometry information, one can also supply the following optional properties:

  • id:
    • By supplying an ID, the Boxes' properties can be modified later (by passing the same id).
    • When modifying a previously added Box, all properties (other than id) are optional (supplied properties are overridden).
// Initial Box definition (BoxDataCentered format).
        xCenter: 0,
        yCenter: 0,
        zCenter: 0,
        xSize: 1,
        ySize: 1,
        zSize: 1,
        id: 'box-#0',
// Modify 'yCenter' property only.
        id: 'box-#0',
        yCenter: 5,
  • color:
    • Assigns a Color to the Box to be used when individual coloring mode is enabled.
// Add Boxes with individual Colors.
    color: ColorRGBA( 255, 0, 0 )
// Enable individual coloring mode.
BoxSeries3D.setFillStyle( new IndividualPointFill() )
  • value:
    • Assigns a look-up value to the Box to be used when look-up coloring mode is enabled.
// Define Color Look-Up-Table.
const lut = new LUT( {
    steps: [
        { value: 0, color: ColorRGBA( 0, 0, 0 ) },
        { value: 100, color: ColorRGBA( 255, 0, 0 ) }
    interpolate: true
} )
// Add Boxes with look up values.
    value: 50
// Enable look up coloring mode
BoxSeries3D.setFillStyle( new PalettedFill({ lut }) )