Class for visualization of large sets of individually configurable 3D Boxes.

Add data with invalidateData.

Style boxes with setFillStyle.

Example usage:

 // Construct a grid of vertical boxes.
const data = [
{ x: 0, z: 0 },
{ x: 1, z: 0 },
{ x: 0, z: 1 },
{ x: 1, z: 1 }
]
// Map coords into **BoxData**.
.map( coords => {
const height = Math.random() * 100
return {
xCenter: coords.x,
yCenter: height / 2,
zCenter: coords.z,
xSize: 1,
ySize: height,
zSize: 1
}
})
const chart = lightningChart().Chart3D()
const boxSeries = chart.addBoxSeries()
.invalidateData( data )

Color shading style.

By default, BoxSeries3D uses Phong shading style.

This can be changed with BoxSeries3D.setColorShadingStyle(new ColorShadingStyles.Simple())

Hierarchy

Implements

Properties

_shadingStyle: ColorShadingStyle = _phongShadingStyle

Methods

  • Permanently destroy the component.

    To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.

    let chart = ...ChartXY()
    let axisX = chart.getDefaultAxisX()
    // Dispose Chart, and remove all references so that they can be garbage-collected.
    chart.dispose()
    chart = undefined
    axisX = undefined

    Returns

    Object itself for fluent interface

    Returns BoxSeries3D

  • Get component highlight animations enabled or not.

    Returns

    Animation enabled?

    Returns boolean

  • Get whether series is taken into account with automatic scrolling and fitting of attached axes.

    By default, this is true for all series.

    Returns

    true default, axes will take series into account in scrolling and fitting operations. false, axes will ignore series boundaries.

    Returns boolean

  • Get 3D depth test enabled for this series.

    By default this is enabled, meaning that any series that is rendered after this series and is behind this series will not be rendered.

    Can be disabled to alter 3D rendering behavior.

    Returns

    Depth test enabled?

    Returns boolean

  • Get theme effect enabled on component or disabled.

    A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

     // Example, disable theme effect from a particular component.
    Component.setEffect(false)

    For the most part, theme effects are enabled by default on most components.

    Theme effect is configured with effect property.

    Returns

    Boolean that describes whether drawing the theme effect is enabled around the component or not.

    Returns boolean

  • Get FillStyle of BoxSeries.

    Supports following FillStyles:

    • SolidFill: Single solid color for all boxes.
    • IndividualPointFill: Each box is colored according to its "color" property. If the property is not present, the box is colored with the IndividualPointFill objects' fall-back color.
    • PalettedFill: Each box is colored according to its "value" property and the PalettedFill objects' look up table.

    Returns

    FillStyle object.

    Returns FillStyle

  • Get state of component highlighting.

    In case highlight animations are enabled, this method returns the unanimated highlight value.

    Returns

    Number between 0 and 1, where 1 is fully highlighted.

    Returns number

  • Get boolean flag for whether object should highlight on mouse hover

    Returns

    Boolean for if object should highlight on mouse hover or not.

    Returns boolean

  • Get boolean flag for whether object is currently under mouse or not

    Returns

    Boolean for is object under mouse currently

    Returns boolean

  • Get mouse interactions enabled or disabled. Disabled mouse-interactions will naturally prevent mouse-driven highlighting from ever happening.

    Returns

    Mouse interactions state

    Returns boolean

  • Get the name of the Component.

    Returns

    The name of the Component.

    Returns string

  • Get rounded edges of Boxes.

    NOTE: Rounded edges result in increased geometry precision, which in turn uses more rendering resources.

    Returns

    Either a number in range [0, 1] describing the amount of rounding or undefined for disabled rounded edges.

    Returns undefined | number

  • Get element visibility.

    Returns

    true when element is set to be visible and false otherwise.

    Returns boolean

  • Returns

    Max X value of the series

    Returns undefined | number

  • Returns

    Min X value of the series

    Returns undefined | number

  • Returns

    Max Y value of the series

    Returns undefined | number

  • Returns

    Min Y value of the series

    Returns undefined | number

  • Returns

    Max Z value of the series

    Returns undefined | number

  • Returns

    Min Z value of the series

    Returns undefined | number

  • Method for invalidating Box data. Accepts an Array of BoxDataCentered objects.

    Properties that must be defined for each NEW Box:

    • "xCenter", "yCenter", "zCenter" | coordinates of Box in Axis values.
    • "xSize", "ySize", "zSize" | size of Box in Axis values.

    ( if altering a previously created Box, these are not necessary )

    Optional properties:

    • "id": If supplied, the Box can be altered afterwards by supplying different data with the same "id"
    • "color": If supplied, the Box will be coloured with that color, but only when the BoxSeries is styled as IndividualPointFill
    • "value" Look-up value to be used when the BoxSeries is styled as PalettedFill.

    Example usage:

    • Add an unidentified Box - in this case the Box can not be altered afterwards.
     BoxSeries3D.invalidateData([
    { xCenter: 0, yCenter: 0, zCenter: 0, xSize: 1, ySize: 1, zSize: 1 }
    ])
    • Add an identified Box and alter its 'color' property afterwards.
     const id = "anything-unique"
    BoxSeries3D
    .setFillStyle( new IndividualPointFill() )
    .invalidateData([
    { id, xCenter: 0, yCenter: 0, zCenter: 0, xSize: 1, ySize: 1, zSize: 1 }
    ])
    setTimeout(() => {
    BoxSeries3D.invalidateData([ { id, color: ColorRGBA( 0, 255, 0 ) } ])
    }, 2000)

    Parameters

    Returns BoxSeries3D

  • Method for invalidating Box data. Accepts an Array of BoxDataBounds objects.

    NOTE: Internally transforms all data into BoxDataCentered format, meaning that this method is slightly slower than the alternative.

    Properties that must be defined for each NEW Box:

    • "xMin", "xMax" | bounds of Box on X Axis.
    • "yMin", "yMax" | bounds of Box on X Axis.
    • "zMin", "zMax" | bounds of Box on X Axis.

    ( if altering a previously created Box, these are not necessary )

    Optional properties:

    • "id": If supplied, the Box can be altered afterwards by supplying different data with the same "id"
    • "color": If supplied, the Box will be coloured with that color, but only when the BoxSeries is styled as IndividualPointFill
    • "value" Look-up value to be used when the BoxSeries is styled as PalettedFill.

    Example usage:

    • Add an unidentified Box - in this case the Box can not be altered afterwards.
     BoxSeries3D.invalidateData([
    { xMin: 0, yMin: 0, zMin: 0, xMax: 1, yMax: 1, zMax: 1 }
    ])
    • Add an identified Box and alter its 'color' property afterwards.
     const id = "anything-unique"
    BoxSeries3D
    .setFillStyle( new IndividualPointFill() )
    .invalidateData([
    { id, xMin: 0, yMin: 0, zMin: 0, xMax: 1, yMax: 1, zMax: 1 }
    ])
    setTimeout(() => {
    BoxSeries3D.invalidateData([ { id, color: ColorRGBA( 0, 255, 0 ) } ])
    }, 2000)

    Parameters

    Returns BoxSeries3D

  • Remove event listener from dispose event.

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Unsubscribe from Highlight object event. This is called whenever an object is highlighted

    Returns

    True if the unsubscription was successful.

    Parameters

    • token: Token

      Token that was received when subscribing to the event.

    Returns boolean

  • Remove event listener from Mouse Click Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Double Click Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Down Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Drag Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Drag Start Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Drag Stop Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Enter Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Leave Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Move Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Up Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Mouse Wheel Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Touch End Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Touch Move Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from Touch Start Event

    Returns

    True if the listener is successfully removed and false if it is not found

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from visibleStateChanged

    Parameters

    • token: Token

    Returns boolean

  • Subscribe onDispose event. This event is triggered whenever the ChartComponent is disposed.

     // Example usage

    lineSeries.onDispose(() => {
    console.log('lineSeries was disposed')
    })

    lineSeries.dispose()

    Returns

    Token of subscription

    Parameters

    Returns Token

  • Subscribe to highlight object event. This is called whenever an object is highlighted.

    Returns

    Token that can be used to unsubscribe from the event.

    Parameters

    • handler: ((isHighlighted: number | boolean) => void)

      Function that is called when event is triggered.

        • (isHighlighted: number | boolean): void
        • Parameters

          • isHighlighted: number | boolean

          Returns void

    Returns Token

  • Register new event listener to visibleStateChanged event.

    Parameters

    • listener: VisibleStateChangedHandler<BoxSeries3D>

      Event listener for visibleStateChanged

    Returns Token

  • Set component highlight animations enabled or not. For most components this is enabled by default.

     // Example usage, disable highlight animations.
    component.setAnimationHighlight(false)

    Returns

    Object itself

    Parameters

    • enabled: boolean

      Animation enabled?

    Returns BoxSeries3D

  • Set whether series is taken into account with automatic scrolling and fitting of attached axes.

    By default, this is true for all series.

    By setting this to false, any series can be removed from axis scrolling/fitting.

     // Example syntax, remove series from automatic scrolling / fitting.
    LineSeries.setAutoScrollingEnabled(false)

    Returns

    Object itself for fluent interface.

    Parameters

    • enabled: boolean

      true default, axes will take series into account in scrolling and fitting operations. false, axes will ignore series boundaries.

    Returns BoxSeries3D

  • Set Color Shading Style for series.

    Shading style changes the visual style of the rendering. See ColorShadingStyles for available shading styles.

    Use Simple color shading style:

    series3D.setShadingStyle(new ColorShadingStyles.Simple())
    

    Use Phong color shading style:

    series3D.setShadingStyle(new ColorShadingStyles.Phong())
    

    Configuring specular highlight for Phong shading style:

    series3D.setShadingStyle(new ColorShadingStyles.Phong({
    specularReflection: 0.5,
    specularColor: ColorRGBA(255, 255, 255)
    }))

    Returns

    Object itself for fluent interface.

    Parameters

    Returns BoxSeries3D

  • Set 3D depth test enabled for this series.

    By default this is enabled, meaning that any series that is rendered after this series and is behind this series will not be rendered.

    Can be disabled to alter 3D rendering behavior.

     // Example syntax, disable depth test.
    pointSeries3D.setDepthTestEnabled(false)

    Returns

    Object itself for fluent interface.

    Parameters

    • enabled: boolean

      Depth test enabled?

    Returns BoxSeries3D

  • Set theme effect enabled on component or disabled.

    A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

     // Example, disable theme effect from a particular component.
    Component.setEffect(false)

    For the most part, theme effects are enabled by default on most components.

    Theme effect is configured with effect property.

    Returns

    Object itself.

    Parameters

    • enabled: boolean

      Theme effect enabled

    Returns BoxSeries3D

  • Set state of component highlighting.

     // Example usage

    component.setHighlight(true)

    component.setHighlight(0.5)

    If highlight animations are enabled (which is true by default), the transition will be animated. As long as the component is highlighted, the active highlight intensity will be animated continuously between 0 and the configured value. Highlight animations can be disabled with setAnimationHighlight

    Returns

    Object itself

    Parameters

    • highlight: number | boolean

      Boolean or number between 0 and 1, where 1 is fully highlighted.

    Returns BoxSeries3D

  • Set highlight on mouse hover enabled or disabled.

    Mouse interactions have to be enabled on the component for this to function as expected. See setMouseInteractions for more information.

    Returns

    Object itself for fluent interface.

    Parameters

    • state: boolean

      True if highlighting on mouse hover, false if no highlight on mouse hover

    Returns BoxSeries3D

  • Set component mouse interactions enabled or disabled.

    Disabling mouse interactions means that the objects below this component can be interacted through it.

    Possible side-effects from disabling mouse interactions:

    • Mouse events are not triggered. For example, onMouseMove.
    • Mouse driven highlighting will not work.

    Returns

    Object itself for fluent interface

    Parameters

    • state: boolean

      Specifies state of mouse interactions

    Returns BoxSeries3D

  • Sets the name of the Component updating attached LegendBox entries

    Returns

    Object itself

    Parameters

    • name: string

      Name of the Component

    Returns BoxSeries3D

  • Set rounded edges of Boxes.

    NOTE: Rounded edges result in increased geometry precision, which in turn uses more rendering resources.

    Returns

    Object itself for fluent interface.

    Parameters

    • roundness: undefined | number

      Either a number in range [0, 1] describing the amount of rounding or undefined to disable rounded edges.

    Returns BoxSeries3D

  • Set element visibility.

    Returns

    Object itself.

    Parameters

    • state: boolean

      true when element should be visible and false when element should be hidden.

    Returns BoxSeries3D