Chart for visualizing data in a 3-dimensional scene, with camera and light source(s).

Camera can be moved around with user interactions (mouse & touch). It is always oriented to face the center of the scene.

Light source is always located at the location of the Camera, and directed towards the center of Axes.

Data can be added to the Chart via various Series types, each with their own method of visualization:

 const pointLineSeries3D = chart3D.addPointLineSeries()
.add( [
{ x: 0, y: 0, z: 0 },
{ x: 1, y: 0, z: 0 },
{ x: 2, y: 1, z: 0 }
] )

Hierarchy

Implements

Properties

Methods

addBoxSeries addLegendBox addLineSeries addPointLineSeries addPointSeries addSurfaceGridSeries addSurfaceScrollingGridSeries addUIElement dispose forEachAxis getAnimationZoom getAnimationsEnabled getBackgroundFillStyle getBackgroundStrokeStyle getBoundingBox getBoundingBoxStrokeStyle getCameraAutomaticFittingEnabled getCameraDirection getCameraLocation getDefaultAxes getDefaultAxisX getDefaultAxisY getDefaultAxisZ getMinimumSize getMouseInteractionRotate getMouseInteractionZoom getPadding getSeries getSeriesBackgroundEffect getSeriesBackgroundFillStyle getSeriesBackgroundStrokeStyle getTheme getTitle getTitleEffect getTitleFillStyle getTitleFont getTitleMargin getTitleRotation getTitleSize offBackgroundMouseClick offBackgroundMouseDoubleClick offBackgroundMouseDown offBackgroundMouseDrag offBackgroundMouseDragStart offBackgroundMouseDragStop offBackgroundMouseEnter offBackgroundMouseLeave offBackgroundMouseMove offBackgroundMouseTouchStart offBackgroundMouseUp offBackgroundMouseWheel offBackgroundTouchEnd offBackgroundTouchMove offCameraChange offDispose offResize offSeriesBackgroundMouseClick offSeriesBackgroundMouseDoubleClick offSeriesBackgroundMouseDown offSeriesBackgroundMouseDrag offSeriesBackgroundMouseDragStart offSeriesBackgroundMouseDragStop offSeriesBackgroundMouseEnter offSeriesBackgroundMouseLeave offSeriesBackgroundMouseMove offSeriesBackgroundMouseUp offSeriesBackgroundMouseWheel offSeriesBackgroundTouchEnd offSeriesBackgroundTouchMove offSeriesBackgroundTouchStart onBackgroundMouseClick onBackgroundMouseDoubleClick onBackgroundMouseDown onBackgroundMouseDrag onBackgroundMouseDragStart onBackgroundMouseDragStop onBackgroundMouseEnter onBackgroundMouseLeave onBackgroundMouseMove onBackgroundMouseUp onBackgroundMouseWheel onBackgroundTouchEnd onBackgroundTouchMove onBackgroundTouchStart onCameraChange onDispose onResize onSeriesBackgroundMouseClick onSeriesBackgroundMouseDoubleClick onSeriesBackgroundMouseDown onSeriesBackgroundMouseDrag onSeriesBackgroundMouseDragStart onSeriesBackgroundMouseDragStop onSeriesBackgroundMouseEnter onSeriesBackgroundMouseLeave onSeriesBackgroundMouseMove onSeriesBackgroundMouseUp onSeriesBackgroundMouseWheel onSeriesBackgroundTouchEnd onSeriesBackgroundTouchMove onSeriesBackgroundTouchStart saveToFile setAnimationZoom setAnimationsEnabled setBackgroundFillStyle setBackgroundStrokeStyle setBoundingBox setBoundingBoxStrokeStyle setCameraAutomaticFittingEnabled setCameraLocation setMouseInteractionRotate setMouseInteractionZoom setMouseInteractions setPadding setSeriesBackgroundEffect setSeriesBackgroundFillStyle setSeriesBackgroundStrokeStyle setSeriesHighlightOnHover setTitle setTitleEffect setTitleFillStyle setTitleFont setTitleMargin setTitleRotation

Properties

3D Coordinate system selector to use with translatePoint3D function, which lets users translate coordinates between different 3D coordinate systems.

 // Example, translate coordinate from Chart3D Axes to World Space.
const coordWorld = translatePoint3D(
// Coordinate on Axes.
{ x: 10, y: 5, z: 25 },
// Source coordinate system.
chart3D.axes,
// Target coordinate system.
chart3D.world
)

The axes selector describes the coordinate system of 3D charts Axes (X, Y, Z).

About 3D coordinate systems:

Chart3D camera location is configured in World Space, which is currently the primary reason for interacting with different 3D coordinate systems.

For example, depth sorting of transparent objects by rendering data based on their distance to the camera.

Depth sorting is required for blending stacked transparent objects.

engine: PublicEngine

Interface for end user API of the LCJS engine. It provides some useful capabilities over the area enclosed by a single LCJS context (which can be just a single chart, or a Dashboard with several charts).

pixelScale: LinearScaleXY

Scale for panel area in pixels.

removePanel: ((panel: Panel) => void)

Type declaration

    • (panel: Panel): void
    • Parameters

      Returns void

uiScale: LinearScaleXY

Scale for panel area in percentages (0-100).

3D Coordinate system selector to use with translatePoint3D function, which lets users translate coordinates between different 3D coordinate systems.

 // Example, translate coordinate from Chart3D Axes to World Space.
const coordWorld = translatePoint3D(
// Coordinate on Axes.
{ x: 10, y: 5, z: 25 },
// Source coordinate system.
chart3D.axes,
// Target coordinate system.
chart3D.world
)

The world selector describes 3D World Space.

3D world space is used for camera positioning, is centered at [0, 0, 0] and values generally range between += 5.

About 3D coordinate systems:

Chart3D camera location is configured in World Space, which is currently the primary reason for interacting with different 3D coordinate systems.

For example, depth sorting of transparent objects by rendering data based on their distance to the camera.

Depth sorting is required for blending stacked transparent objects.

Methods

  • Create Series for visualization of large sets of individually configurable 3D Boxes.

    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 )

    Returns

    BoxSeries3D.

    Returns BoxSeries3D

  • Add a legendbox.

    Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.

    The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.

    Legendbox alignment:

    Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox:

     // Default (vertical) LegendBox.
    const legendBox = ChartXY.addLegendBox()

    // Horizontal LegendBox.
    const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)

    Custom Legendbox positioning:

    By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).

    A custom location can be configured with UIElement API:

    Position coordinate system is specified when creating legendbox.

    1. LegendBox with default positioning coordinate system.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox )
    // Position = [0, 100] as percentages.
    .setPosition({ x: 50, y: 50 })
    1. Position in pixel coordinate system.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.pixelScale )
    // Position = pixels.
    .setPosition({ x: 300, y: 100 })
    1. Position on Axes.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
    // Position = Axis values.
    .setPosition({ x: 5, y: 5 })

    Returns

    LegendBox

    Parameters

    • builder: UILegendBoxBuilder<InternalBackground> = _legendBoxBuilder

      LegendBoxBuilder. If omitted, VerticalLegendBox will be selected. Use LegendBoxBuilders for selection.

    • scale: UserScaleDefinition = ...

      Optional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in percentages [0, 100].

    Returns LegendBox<UIBackground>

  • Method for adding a new LineSeries3D to the chart. This Series type for visualizing a collection of { x, y, z } coordinates by a continuous line stroke.

    LineSeries3D is optimized for massive amounts of data - here are some reference specs to give an idea:

    • A static data set in millions data points range is rendered in hundreds of milliseconds (~200ms). Afterwards chart can be rotated and zoomed with 60 FPS.
    • With streaming data, even millions of data points can be streamed in every second, while retaining an interactive document.

    To learn more about its features and usage, refer to LineSeries3D.

    Returns

    New series.

    Returns LineSeries3D

  • Method for adding a new PointLineSeries3D to the chart. This Series type for visualizing a collection of { x, y, z } coordinates by a continuous line stroke and markers.

    PointLineSeries3D is optimized for massive amounts of data - here are some reference specs to give an idea:

    • A static data set in millions data points range is rendered in hundreds of milliseconds (~200ms). Afterwards chart can be rotated and zoomed with 60 FPS.
    • With streaming data, even millions of data points can be streamed in every second, while retaining an interactive document.

    To learn more about its features and usage, refer to PointLineSeries3D.

    Returns

    New series.

    Returns PointLineSeries3D

  • Method for adding a new PointSeries3D to the chart. This series type for visualizing a collection of { x, y, z } coordinates by different markers.

    PointSeries3D is optimized for massive amounts of data - here are some reference specs to give an idea:

    • A static data set in millions data points range is rendered in hundreds of milliseconds (~200ms). Afterwards chart can be rotated and zoomed with 60 FPS.
    • With streaming data, even millions of data points can be streamed in every second, while retaining an interactive document.

    To learn more about its features and usage, refer to PointSeries3D.

    Readonly configuration:

    Some properties of PointSeries3D can only be configured when it is created. These arguments are all optional, and are wrapped in a single object parameter:

     // Example,
    const pointCloudSeries3D = Chart3D.addPointSeries({
    // Specify point series type as point cloud.
    type: PointSeriesTypes3D.Pixelated
    })

    To learn about available properties, refer to PointSeriesOptions3D.

    Returns

    New series.

    Type Parameters

    Parameters

    • Optional options: PointSeriesOptions3D<T>

      Optional object with readonly configuration arguments for PointSeries3D.

    Returns InstanceType<T>

  • Add a Series for visualizing a Surface Grid with a static column and grid count. Has API for fast modification of cell Y and Intensity values.

    The grid is defined by imagining a plane along X and Z axis, split to < COLUMNS > (cells along X axis) and < ROWS > (cells along Z axis)

    The total amount of < CELLS > in a surface grid is calculated as columns * rows. Each < CELL > can be associated with DATA from an user data set.

    This series is optimized for massive amounts of data - here are some reference specs to give an idea:

    • A static data set in tens of millions range is rendered in a matter of seconds.
    • A data set in tens of millions range can be updated in less than a second.
    • Maximum data set size is entirely limited by available memory (RAM). Even billion (1 000 000 000) data points have been visualized on a personal computer. Interacting with massive surface charts (more than tens of millions data points) requires a powerful GPU !

    To learn more about its features and usage, refer to SurfaceGridSeries3D.

    Readonly configuration:

    Some properties of SurfaceGridSeries3D can only be configured when it is created. Some of these arguments are optional, while some are required. They are all wrapped in a single object parameter:

     // Example,
    const surfaceGridSeries = Chart3D.addSurfaceGridSeries({
    columns: 100,
    rows: 200,
    })

    To learn about these properties, refer to SurfaceGridSeries3DOptions.

    For scrolling surface grid, see addSurfaceScrollingGridSeries.

    Returns

    Surface Grid Series.

    Parameters

    Returns SurfaceGridSeries3D

  • Add a Series for visualizing a Surface Grid with API for pushing data in a scrolling manner (append new data on top of existing data).

    The grid is defined by imagining a plane along X and Z axis, split to < COLUMNS > (cells along X axis) and < ROWS > (cells along Z axis)

    The total amount of < CELLS > in a surface grid is calculated as columns * rows. Each < CELL > can be associated with DATA from an user data set.

    This series is optimized for massive amounts of data - here are some reference specs to give an idea:

    • A data set of tens of millions data points is rendered in a matter of seconds.
    • Maximum data set size is entirely limited by available memory (RAM). Even billion (1 000 000 000) data points have been visualized on a personal computer. Interacting with massive surface charts (more than tens of millions data points) requires a powerful GPU !
    • Scrolling Surface Grid input stream rate is virtually unlimited - even 10 million incoming data points per second can easily be processed. Application limitations usually come from previously mentioned RAM and/or GPU bottlenecks.

    To learn more about its features and usage, refer to SurfaceScrollingGridSeries3D.

    Readonly configuration:

    Some properties of SurfaceScrollingGridSeries3D can only be configured when it is created. Some of these arguments are optional, while some are required. They are all wrapped in a single object parameter:

     // Example,
    const surfaceScrollingGridSeries = Chart3D.addSurfaceScrollingGridSeries({
    columns: 100,
    rows: 200,
    })

    To learn about these properties, refer to SurfaceScrollingGridSeries3DOptions.

    For static surface grid, see addSurfaceGridSeries.

    Returns

    Surface Scrolling Grid Series.

    Parameters

    Returns SurfaceScrollingGridSeries3D

  • Add a stand-alone UIElement using a builder.

    Example usage:

    1. TextBox with default positioning coordinate system.
     addUIElement( UIElementBuilders.TextBox )
    // Position = [0, 100] as percentages.
    .setPosition({ x: 50, y: 50 })
    1. Position in pixel coordinate system.
     addUIElement( UIElementBuilders.TextBox, chart.pixelScale )
    // Position = pixels.
    .setPosition({ x: 300, y: 100 })
    1. Position on Axes.
     addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
    // Position = Axis values.
    .setPosition({ x: 5, y: 5 })

    Returns

    Object that fulfills interfaces: UIElementType (typeparam) and UIElement

    Type Parameters

    Parameters

    • builder: UIElementBuilder<UIElementType> = ...

      UIElementBuilder. If omitted, TextBoxBuilder will be selected. Use UIElementBuilders for selection.

    • scale: UserScaleDefinition = ...

      Optional parameter for altering the coordinate system used for positioning the UIElement. Defaults to whole Chart in percentages [0, 100].

    Returns UIElementType & UIElement

  • 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 Chart3D

  • Get Chart3D zoom animation enabled.

    When enabled, zooming with mouse wheel or trackpad will include a short animation.

    This is enabled by default.

     // Example syntax, disable zoom animation.
    chart3D.setAnimationZoom(false)

    Returns

    Boolean.

    Returns boolean

  • Get dimensions of Scenes "bounding box". Bounding box defines the space allocated for the Charts 3D Axes.

    It is visualized with a wireframe, as well as 3D Axes on its sides.

    Returns

    Dimensions of bounding box as World Units.

    Returns Point3D

  • Get style of 3D bounding box.

    The bounding box is a visual reference that all the data of the Chart is depicted inside of. The Axes of the 3D chart are always positioned along the sides of the bounding box.

    Returns

    LineStyle object.

    Returns LineStyle

  • Get automatic camera fitting enabled. This is enabled as the default configuration. Note that zooming in or out disables it automatically.

    Returns

    Boolean.

    Returns boolean

  • Get the direction of camera in World Space, a coordinate system that is not tied to 3D Axes.

    The direction is set according to the location of the camera, so that it is facing (0, 0, 0).

    Returns

    Camera direction in 3D space. Always an unit vector.

    Returns Point3D

  • Get the location of camera in World Space, a coordinate system that is not tied to 3D Axes.

    Returns

    Camera location in 3D space.

    Returns Point3D

  • Convenience method to get a tuple of the Charts X, Y and Z axes.

    Equal to [Chart3D.getDefaultAxisX(), Chart3D.getDefaultAxisY(), Chart3D.getDefaultAxisZ()]

    Intended for conveniently applying same modifications to all axes.

    // Example, disable mouse interactions from all axes.
    Chart3D.getDefaultAxes().forEach((axis) => axis.setMouseInteractions(false))

    Returns

    [Chart3D.getDefaultAxisX(), Chart3D.getDefaultAxisY(), Chart3D.getDefaultAxisZ()]

    Returns [Axis3D, Axis3D, Axis3D]

  • Get Axis X.

    Returns

    Axis3D object.

    Returns Axis3D

  • Get Axis Y.

    Returns

    Axis3D object.

    Returns Axis3D

  • Get Axis Z.

    Returns

    Axis3D object.

    Returns Axis3D

  • Get minimum size of Chart. Depending on the type of class this value might be automatically computed to fit different elements.

    Returns

    Vec2 minimum size or undefined if unimplemented

    Returns undefined | Point

  • Get is mouse-interaction enabled: Rotating axes with mouse-drag or by touch.

    Returns

    Boolean flag

    Returns boolean

  • Get is mouse-interaction enabled: Zooming axes with mouse-wheel or by touch.

    Returns

    Boolean flag

    Returns boolean

  • Get reference to all series of Chart3D.

    Returns

    List of 3D series.

    Returns Series3D[]

  • 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 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

  • Remove subscription from mouse-up event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Unsubscribe from camera change event.

    This event is triggered whenever the location of Chart3D camera is changed.

    Returns

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

    Parameters

    Returns boolean

  • 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

  • Remove event listener from resize 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

  • Subscribe to camera change event.

    This event is triggered whenever the location of Chart3D camera is changed.

    Returns

    Token which can be used with offCameraChange to unsubscribe the event handler.

    Parameters

    • handler: ((chart: Chart3D, cameraLocation: Point3D) => unknown)

      function which is triggered on event. Receives two parameters: chart, and cameraLocation.

    Returns Token

  • Subscribe onDispose event. This event is triggered whenever the Control (Dashboards and all chart types) is disposed.

     // Example usage

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

    Chart.dispose()

    Returns

    Token of subscription

    Parameters

    • handler: ((object: Chart3D) => unknown)

      Handler function for event

        • (object: Chart3D): unknown
        • Parameters

          Returns unknown

    Returns Token

  • Subscribe to resize event. This event is triggered whenever the area of chart changes (due to document or dashboard resizing).

     // Example usage,
    ChartXY.onResize((chart, width, height, engineWidth, engineHeight) => {
    console.log('Chart resized', 'width', width, 'height', height, 'engineWidth', engineWidth, 'engineHeight', engineHeight)
    })

    Returns

    Token of subscription

    Parameters

    • handler: ((obj: this, width: number, height: number, engineWidth: number, engineHeight: number) => void)

      Handler function for event

        • (obj: this, width: number, height: number, engineWidth: number, engineHeight: number): void
        • Parameters

          • obj: this
          • width: number
          • height: number
          • engineWidth: number
          • engineHeight: number

          Returns void

    Returns Token

  • Capture rendered state in an image file. Prompts the browser to download the created file.

    NOTE: The download might be blocked by browser/plugins as harmful. To prevent this, only call the method in events tied to user-interactions. From mouse-event handlers, for example.

    Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL. For supported image formats, compression quality, Etc. refer to:

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

    Example usage:

    // Download 'screenshot.png'
    Panel.saveToFile('screenshot')
    // Attempt download 'maybeNotSupported.bmp'
    Panel.saveToFile('maybeNotSupported', 'image/bmp')
    // Attempt download jpeg.file with specified compression quality
    Panel.saveToFile('fileName', 'image/jpeg', 0.50)

    Remarks

    If 'type' is not supported by browser, an Error will be thrown.

    Parameters

    • fileName: string

      Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.

    • Optional type: string

      A DOMString indicating the image format. The default format type is image/png.

    • Optional encoderOptions: number

      A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92.

    Returns Chart3D

  • Set Chart3D zoom animation enabled.

    When enabled, zooming with mouse wheel or trackpad will include a short animation.

    This is enabled by default.

     // Example syntax, disable zoom animation.
    chart3D.setAnimationZoom(false)

    Returns

    Chart itself for fluent interface.

    Parameters

    • animationsEnabled: undefined | boolean

      Boolean.

    Returns Chart3D

  • Disable/Enable all animations for the chart.

    Affects:

    • Axis animations.
    • Zoom animation.
    • Series highlight animations.

    Returns

    Chart itself for fluent interface.

    Parameters

    • animationsEnabled: boolean

      Boolean value to enable/disable all animations

    Returns Chart3D

  • Set FillStyle of chart background.

     // Example usage,
    ChartXY.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))

    Related API:

    • Use SolidFill to describe a solid fill color.
    • Use ColorRGBA to create a color from Red, Green, Blue (and optionally) Alpha values in range [0, 255].

    Transparent chart backgrounds:

    LightningChart JS charts can be configured to be fully or partially transparent.

     // Example, partially transparent chart

    // Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
    chart.engine.setBackgroundFillStyle(emptyFill)
    // Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
    chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
    // Some charts also have a separate series background.
    chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))

    Returns

    Object itself

    Parameters

    Returns Chart3D

  • Set the dimensions of the Scenes bounding box.

    The bounding box is a visual reference that all the data of the Chart is depicted inside of. The Axes of the 3D chart are always positioned along the sides of the bounding box.

    Example usage:

    • Symmetric bounding box
     setBoundingBox( { x: 1.0, y: 1.0, z: 1.0 } )
    
    • Bounding box whose Y dimension is 4 times that of the others
     setBoundingBox( { x: 1.0, y: 4.0, z: 1.0 } )
    

    Returns

    Object itself for fluent interface

    Parameters

    • dimensions: Point3D

      Dimensions of bounding box. These values do not represent any "unit", only their relative ratios are considered.

    Returns Chart3D

  • Set style of 3D bounding box.

    The bounding box is a visual reference that all the data of the Chart is depicted inside of. The Axes of the 3D chart are always positioned along the sides of the bounding box.

    Example usage:

    • Specify explicit LineStyle object
     Chart3D.setBoundingBoxStrokeStyle(new SolidLine({
    fillStyle: new SolidFill({ color: ColorHEX('#61ff61') }),
    thickness: 5
    }))
    • Modify default style
     // Default value is SolidLine (note that a soft type cast is required for *TypeScript*).
    Chart3D.setBoundingBoxStrokeStyle(( line: SolidLine ) => line
    .setThickness( 10 )
    )

    Returns

    Object itself for fluent interface.

    Parameters

    Returns Chart3D

  • Set automatic camera fitting enabled. This is enabled as the default configuration. Note that zooming in or out disables it automatically.

    Returns

    Object itself for fluent interface.

    Parameters

    • enabled: boolean

      Boolean.

    Returns Chart3D

  • Set the location of camera in World Space, a coordinate system that is not tied to 3D Axes.

    The camera always faces (0, 0, 0) coordinate.

    The light source is always a set distance behind the camera.

    Parameters

    • cameraLocation: Point3D

      Camera location in 3D space. Valid values are in the range [1, 5]. Note, that placing the camera too close to the bounding box is restricted.

    Returns Chart3D

  • Set is mouse-interaction enabled: Rotating axes with mouse-drag or by touch.

    Returns

    Object itself

    Parameters

    • enabled: boolean

      Boolean flag

    Returns Chart3D

  • Set is mouse-interaction enabled: Zooming axes with mouse-wheel or by touch.

    Returns

    Object itself

    Parameters

    • enabled: boolean

      Boolean flag

    Returns Chart3D

  • Set padding around Chart in pixels.

     // Example 1, specify complete padding (four sides).
    ChartXY.setPadding({ left: 16, right: 16, top: 32, bottom: 8 })
     // Example 2, specify only single padding.
    ChartXY.setPadding({ right: 64 })

    Returns

    Object itself

    Parameters

    • padding: number | Partial<Margin>

      Number with pixel margins for all sides or datastructure with individual pixel paddings for each side. Any side can be omitted, only passed values will be overridden.

    Returns Chart3D

  • 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 Chart3D

  • Set FillStyle of series background (area behind series).

     // Example usage,
    ChartXY.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 60, 0, 0 ) }))

    Related API:

    • Use SolidFill to describe a solid fill color.
    • Use ColorRGBA to create a color from Red, Green, Blue (and optionally) Alpha values in range [0, 255].

    Transparent chart backgrounds:

    LightningChart JS charts can be configured to be fully or partially transparent.

     // Example, partially transparent chart

    // Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
    chart.engine.setBackgroundFillStyle(emptyFill)
    // Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
    chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
    // Some charts also have a separate series background.
    chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))

    Returns

    Object itself

    Parameters

    Returns Chart3D

  • 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 Chart3D

  • Specifies padding after chart title.

    This does not have an effect if title is hidden (empty FillStyle).

     // Example 2, specify margins for all sides with same value for Title.
    ChartXY.setTitleMargin(40)

    Returns

    Chart itself for fluent interface

    Parameters

    • marginPixels: number | Partial<Margin>

      Gap after the chart title in pixels.

    Returns Chart3D