Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Chart3D

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 }
     ] )

Index

Properties

Readonly engine

engine : PublicEngine

Public, safe interface for Panels rendering engine.

pixelScale

pixelScale : Vec2<Scale>

Scale for panel area in pixels. Margin should be set according to panel margin (currently constant).

uiScale

uiScale : Vec2<Scale>

Scale for panel area in percentages (0-100). Margin should be set according to panel margin (currently constant).

Methods

addBoxSeries

  • 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

    BoxSeries3D.

addLegendBox

  • Add a stand-alone LegendBox using a builder.

    Type parameters

    • UIElementType: UIPart = UILegendBox

      Type of UIElement that is specified by 'builder'-parameter.

    Parameters

    • builder: UIElementBuilder<UIElementType>

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

    • scale: Vec2<Scale>

      Optional custom scale to position LegendBox on. Defaults to whole chart in percentages [0, 100].

    Returns UIElementType & UIElement

    LegendBox that fulfills interfaces: UIElementType (typeparam) and UIElement

addLineSeries

  • Create Series for visualization of data by lines connected between data points.

    Returns LineSeries3D

    LineSeries3D.

addPointLineSeries

  • Create Series for visualization of data by lines connected between data points as well as shapes rendered on the data points.

    Parameters

    Returns PointLineSeries3D

    PointLineSeries3D.

addPointSeries

  • Create Series for visualization of data by different shapes.

    Example usage:

    • By default, creates PointSeries3D

      const pointSeries3D = Chart3D.addPointSeries()
    • By specifying options object with type-property, the returned Series' class can be selected

      const pointCloudSeries3D = Chart3D.addPointSeries({
         type: PointSeriesTypes3D.Pixelated
      })

    Type parameters

    Parameters

    • options: PointSeriesOptions3D<T>

      Optional object for passing readonly parameters to configure the created Series.

    Returns InstanceType<T>

    Created Series. If options were omitted or undefined, the Series type defaults to PointSeries3D, otherwise corresponds to class referenced by options.type.

addSurfaceSeries

  • Create Series for visualization of data by surfaces.

    Example usage:

    • By default, creates SurfaceGridSeries3D

      const gridSurface3D = Chart3D.addSurfaceSeries()
    • By specifying options object with type-property, the returned Series' class can be selected

      const meshSurface3D = Chart3D.addSurfaceSeries({
         type: SurfaceSeriesTypes3D.Mesh
      })
    • The easiest way to define Surface geometry is to invalidate it via a callback function

      const resolution = 20
      const grid = chart3D.addSurfaceSeries( {
        type: SurfaceSeriesTypes3D.Grid,
        rows: resolution,
        columns: resolution,
        start: { x: 0, z: 0 },
        end: { x: 100, z: 100 },
        pixelate: true
      } )
        .invalidateYOnly( ( row, column, prev ) => {
            return Math.sin( row * 2 * Math.PI / resolution )
        } )
        .setFillStyle( new PalettedFill( {
             // Refer to "palette" examples for LUT creation.
             lut,
             lookUpProperty: 'y'
         } ) )

    Type parameters

    Parameters

    • options: SurfaceSeriesOptions3D<T>

      Optional object for passing readonly parameters to configure the created Series.

    Returns InstanceType<T>

    Created Series. If options were omitted or undefined, the Series type defaults to SurfaceGridSeries3D, otherwise corresponds to class referenced by options.type.

addUIElement

  • Add a stand-alone UIElement using a builder.

    Type parameters

    • UIElementType: UIPart = UITextBox

      Type of UIElement that is specified by 'builder'-parameter.

    Parameters

    • builder: UIElementBuilder<UIElementType>

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

    • scale: Vec2<Scale>

      Optional custom scale to position UIElement on. Defaults to whole chart in percentages [0, 100].

    Returns UIElementType & UIElement

    Object that fulfills interfaces: UIElementType (typeparam) and UIElement

disableAnimations

  • disableAnimations(): this
  • Disable all animations for the chart.

    After calling this function, animations (Zooming, scaling) for all Axes will be disabled. Animations must be recreated manually afterwards.

    Returns this

    Chart itself for fluent interface.

dispose

  • dispose(): this
  • Permanently dispose 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 this

    Object itself for fluent interface

forEachAxis

  • forEachAxis(clbk: function): void
  • Operate on each axis of chart, x and y

    Parameters

    • clbk: function

      Callback function for axis

        • Parameters

          Returns void

    Returns void

getBackgroundFillStyle

  • Get fillstyle of chart background.

    Returns FillStyle

    FillStyle

getBackgroundStrokeStyle

  • getBackgroundStrokeStyle(): LineStyle
  • Get stroke style of chart background.

    Returns LineStyle

    LineStyle

getBoundingBox

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

    Dimensions of bounding box as World Units.

getBoundingBoxStrokeStyle

  • getBoundingBoxStrokeStyle(): LineStyle
  • 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

    [[LineStyle]] object.

getCameraAutomaticFittingEnabled

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

    Returns boolean

    Boolean.

getCameraDirection

  • Get the direction of camera in 3D space.

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

    Returns Point3D

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

getCameraLocation

  • Get the location of camera in 3D space.

    Returns Point3D

    Camera location in 3D space.

getChartBackgroundFillStyle

  • Get fillstyle of chart background. This is the area enclosed by the axis'.

    deprecated

    Deprecated in v2.2.0. Renamed to getSeriesBackgroundFillStyle.

    Returns FillStyle

    FillStyle

getChartBackgroundStrokeStyle

  • getChartBackgroundStrokeStyle(): LineStyle
  • Get stroke style of chart background. This is the area enclosed by the axis'.

    deprecated

    Deprecated in v2.2.0. Renamed to getSeriesBackgroundStrokeStyle.

    Returns LineStyle

    LineStyle

getDefaultAxisX

  • Get Axis X.

    Returns Axis3D

    Axis3D object.

getDefaultAxisY

  • Get Axis Y.

    Returns Axis3D

    Axis3D object.

getDefaultAxisZ

  • Get Axis Z.

    Returns Axis3D

    Axis3D object.

getMouseInteractionsWhileScrolling

  • getMouseInteractionsWhileScrolling(): boolean
  • Get if mouse and cursor interactions are disabled during scrolling animations for the chart's series.

    Returns boolean

    True if interactions with series are disabled, false if not.

getPadding

  • Get padding around Chart in pixels.

    Returns Margin

    Padding datastructure

getSeriesBackgroundFillStyle

  • Get FillStyle of Series background area (area behind series).

    Returns FillStyle

    FillStyle

getSeriesBackgroundStrokeStyle

  • getSeriesBackgroundStrokeStyle(): LineStyle
  • Get Stroke style of Series background area (area behind series).

    Returns LineStyle

    LineStyle

getTitle

  • getTitle(): string
  • Get text of Chart title.

    Returns string

    Chart title as a string.

getTitleFillStyle

  • Get fill style of Chart Title.

    Returns FillStyle

    FillStyle object

getTitleFont

  • Get font of Chart title.

    Returns FontSettings

    FontSettings object

getTitleMarginBottom

  • getTitleMarginBottom(): number
  • Returns number

    Padding after Chart title

getTitleMarginTop

  • getTitleMarginTop(): number
  • Returns number

    Padding before Chart title

offResize

  • offResize(token: Token): boolean
  • Remove event listener from resize event.

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

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

onResize

  • onResize(handler: function): Token
  • Subscribe to resize event of Panel.

    Parameters

    • handler: function

      Handler function for event

        • Parameters

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

          Returns void

    Returns Token

    Token of subscription

saveToFile

  • saveToFile(fileName: string, type?: undefined | string, encoderOptions?: undefined | number): this
  • 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)
    sideeffect

    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.

    • type: undefined | string

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

    • encoderOptions: undefined | 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 this

setBackgroundFillStyle

setBackgroundStrokeStyle

  • setBackgroundStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this
  • Set stroke style of panel background.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or function which modifies it

    Returns this

    Object itself

setBoundingBox

  • setBoundingBox(dimensions: Point3D): this
  • 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 } )

    Parameters

    • dimensions: Point3D

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

    Returns this

    Object itself for fluent interface

setBoundingBoxStrokeStyle

  • setBoundingBoxStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this
  • 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 )
      )

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      [[LineStyle]] object or function that modifies previous value. Value defaults to SolidLine.

    Returns this

    Object itself for fluent interface.

setCameraAutomaticFittingEnabled

  • setCameraAutomaticFittingEnabled(enabled: boolean): Chart3D
  • Set automatic camera fitting enabled. This is enabled as the default configuration. Note that zooming in or out disables it automatically.

    Parameters

    • enabled: boolean

      Boolean.

    Returns Chart3D

    Object itself for fluent interface.

setCameraLocation

  • setCameraLocation(cameraLocation: Point3D): void
  • Set the location of camera in 3D space.

    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 void

setChartBackgroundFillStyle

  • Set fillStyle of chart background. This is the area enclosed by the axis'.

    deprecated

    Deprecated in v2.2.0. Renamed to setSeriesBackgroundFillStyle.

    Parameters

    Returns this

    Object itself

setChartBackgroundStrokeStyle

  • setChartBackgroundStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this
  • Set stroke of chart background. This is the area enclosed by the axis'.

    Example usage:

     Chart3D.setChartBackgroundStrokeStyle(
         new SolidLine({
             fillStyle: new SolidFill({ color: ColorHEX('#DF9A78') }),
             thickness: 5
         })
     )
    deprecated

    Deprecated in v2.2.0. Renamed to setSeriesBackgroundStrokeStyle.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or mutator to modify existing one

    Returns this

    Object itself

setMouseInteractionsWhileScrolling

  • setMouseInteractionsWhileScrolling(state: boolean): this
  • Set if mouse and cursor interactions should be disabled during scrolling animations for the chart's series.

    Parameters

    • state: boolean

      True if mouse and cursor interactions should be disabled during scrolling animations, false if not.

    Returns this

    Chart itself for fluent interface.

setPadding

  • setPadding(padding: Partial<Margin> | number): this
  • Set padding around Chart in pixels.

    Parameters

    • padding: Partial<Margin> | number

      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 this

    Object itself

setSeriesBackgroundFillStyle

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

    Example usage:

     Chart3D.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorHEX('#9a78df').setA(50) }))

    Parameters

    Returns this

    Object itself

setSeriesBackgroundStrokeStyle

  • setSeriesBackgroundStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this
  • Set Stroke style of Series background area (area behind series).

    Example usage:

     Chart3D.setSeriesBackgroundStrokeStyle(
         new SolidLine({
             fillStyle: new SolidFill({ color: ColorHEX('#DF9A78') }),
             thickness: 5
         })
     )

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or mutator to modify existing one

    Returns this

    Object itself

setSeriesHighlightOnHover

  • setSeriesHighlightOnHover(state: boolean): this
  • Set the state for all Series in the Chart to highlight on mouse hover.

    Parameters

    • state: boolean

      True if all Series should be highlighted on mouse hover, false if not.

    Returns this

    Object itself for fluent interface.

setTitle

  • setTitle(title: string): this
  • Set text of Chart title.

    Parameters

    • title: string

      Chart title as a string.

    Returns this

    Object itself for fluent interface.

setTitleFillStyle

  • Set fill style of Chart Title.

    Example usage:

    // Create a new style
    Chart.setTitleFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
    // Change transparency
    Chart.setTitleFillStyle((solidFill) => solidFill.setA(80))
    // Set hidden
    Chart.setTitleFillStyle(emptyFill)

    Parameters

    Returns this

    Chart itself

setTitleFont

  • Set font of Chart Title.

    Example usage:

    // Create a new FontSettings
    Chart.setTitleFont(new FontSettings({ size: 24, style: 'italic' }))
    // Change existing settings
    Chart.setTitleFont((fontSettings) => fontSettings.setWeight('bold'))

    Parameters

    Returns this

    Chart itself

setTitleMarginBottom

  • setTitleMarginBottom(marginPixels: pixel): this
  • Specifies padding after chart title.

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

    Parameters

    • marginPixels: pixel

      Gap after the chart title in pixels.

    Returns this

    Chart itself for fluent interface

setTitleMarginTop

  • setTitleMarginTop(marginPixels: pixel): this
  • Specifies padding before chart title.

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

    Parameters

    • marginPixels: pixel

      Gap between the top of chart and its title in pixels.

    Returns this

    Chart itself for fluent interface