Options
All
  • Public
  • Public/Protected
  • All
Menu

Class PointLineSeries3D

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.

Creating PointLineSeries3D:

PointLineSeries3D are created with Chart3D.addPointLineSeries method.

 // Example syntax, create point line series 3D
 const pointLineSeries3D = Chart3D.addPointLineSeries()

Frequently used methods:

  • Append data points to series | add
  • Remove all data points from series | clear
  • Configure style of line stroke | setStrokeStyle
  • Configure style of markers | setPointStyle
  • Remove series temporarily, or permanently | dispose
  • Restore series after dispose | restore

Color shading style.

By default, PointLineSeries3D uses Phong shading style.

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

Related information:

For series with only line stroke, see LineSeries3D.

For series with only markers, see PointSeries3D.

Index

Methods

add

  • Add point or array of points to the series.

    Parameters

    Returns this

    Object itself for fluent interface

attach

  • attach(entry: LegendBoxEntry, disposeOnClick?: undefined | false | true): this
  • Attach object to an legendBox entry

    Parameters

    • entry: LegendBoxEntry

      Object which has to be attached

    • disposeOnClick: undefined | false | true

      Flag that indicates whether the Attachable should be disposed/restored, when its respective Entry is clicked.

    Returns this

    Object itself for fluent interface

clear

  • clear(): this
  • Clear all previously pushed data points from the series.

     // Example usage
     LineSeries.clear()
    

    Returns this

    Object itself for fluent interface.

dispose

  • dispose(): this
  • Tell the owning chart to remove this component.

    Returns this

    Object itself.

getAutoScrollingEnabled

  • getAutoScrollingEnabled(): 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 boolean

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

getColorShadingStyle

getDepthTestEnabled

  • getDepthTestEnabled(): 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 boolean

    Depth test enabled?

getHighlightOnHover

  • getHighlightOnHover(): boolean
  • Get boolean flag for whether object should highlight on mouse hover

    Returns boolean

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

getHighlighted

  • getHighlighted(): boolean

getIsUnderMouse

  • getIsUnderMouse(): boolean
  • Get boolean flag for whether object is currently under mouse or not

    Returns boolean

    Boolean for is object under mouse currently

getLineStyle

getLineStyleHighlight

getMouseInteractions

  • getMouseInteractions(): boolean
  • Get mouse interactions enabled or disabled. Disabled mouse-interactions will naturally prevent mouse-driven highlighting from ever happening.

    Returns boolean

    Mouse interactions state

getName

  • getName(): string
  • Get the name of the Component.

    Returns string

    The name of the Component.

getPointAmount

  • getPointAmount(): number

getPointStyle

getPointStyleHighlight

getStrokeStyle

  • Get normal line style (not highlighted).

    Returns LineSeriesStyle3D

    LineSeriesStyle3D

getStrokeStyleHighlight

getXMax

  • getXMax(): number | undefined
  • Returns number | undefined

    Max X value of the series

getXMin

  • getXMin(): number | undefined
  • Returns number | undefined

    Min X value of the series

getYMax

  • getYMax(): number | undefined
  • Returns number | undefined

    Max Y value of the series

getYMin

  • getYMin(): number | undefined
  • Returns number | undefined

    Min Y value of the series

getZMax

  • getZMax(): number | undefined
  • Returns number | undefined

    Max Z value of the series

getZMin

  • getZMin(): number | undefined
  • Returns number | undefined

    Min Z value of the series

isDisposed

  • isDisposed(): boolean
  • Returns boolean

    TODO: True for enabled and false for disabled

offHighlight

  • offHighlight(token: Token): boolean
  • Unsubscribe from Highlight object event. This is called whenever an object is highlighted

    Parameters

    • token: Token

      Token that was received when subscribing to the event.

    Returns boolean

    True if the unsubscription was successful.

offMouseClick

  • offMouseClick(token: Token): boolean
  • Remove event listener from Mouse Click 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

offMouseDoubleClick

  • offMouseDoubleClick(token: Token): boolean
  • Remove event listener from Mouse Double Click 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

offMouseDown

  • offMouseDown(token: Token): boolean
  • Remove event listener from Mouse Down 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

offMouseDrag

  • offMouseDrag(token: Token): boolean
  • Remove event listener from Mouse Drag 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

offMouseDragStart

  • offMouseDragStart(token: Token): boolean
  • Remove event listener from Mouse Drag Start 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

offMouseDragStop

  • offMouseDragStop(token: Token): boolean
  • Remove event listener from Mouse Drag Stop 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

offMouseEnter

  • offMouseEnter(token: Token): boolean
  • Remove event listener from Mouse Enter 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

offMouseLeave

  • offMouseLeave(token: Token): boolean
  • Remove event listener from Mouse Leave 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

offMouseMove

  • offMouseMove(token: Token): boolean
  • Remove event listener from Mouse Move 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

offMouseUp

  • offMouseUp(token: Token): boolean
  • Remove event listener from Mouse Up 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

offMouseWheel

  • offMouseWheel(token: Token): boolean
  • Remove event listener from Mouse Wheel 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

offTouchEnd

  • offTouchEnd(token: Token): boolean
  • Remove event listener from Touch End 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

offTouchMove

  • offTouchMove(token: Token): boolean
  • Remove event listener from Touch Move 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

offTouchStart

  • offTouchStart(token: Token): boolean
  • Remove event listener from Touch Start 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

onHighlight

  • onHighlight(handler: function): Token
  • Subscribe to highlight object event. This is called whenever an object is highlighted.

    Parameters

    • handler: function

      Function that is called when event is triggered.

        • Parameters

          • isHighlighted: boolean

          Returns void

    Returns Token

    Token that can be used to unsubscribe from the event.

onMouseClick

  • Add event listener to Mouse Click Event

    Parameters

    Returns Token

    Token of the event listener

onMouseDoubleClick

  • Add event listener to Mouse Double Click Event

    Parameters

    Returns Token

    Token of the event listener

onMouseDown

  • Add event listener to Mouse Down Event

    Parameters

    Returns Token

    Token of the event listener

onMouseDrag

onMouseDragStart

onMouseDragStop

onMouseEnter

  • Add event listener to Enter Event

    Parameters

    Returns Token

    Token of the event listener

onMouseLeave

  • Add event listener to Mouse Leave Event

    Parameters

    Returns Token

    Token of the event listener

onMouseMove

  • Add event listener to Mouse Move Event

    Parameters

    Returns Token

    Token of the event listener

onMouseUp

  • Add event listener to Mouse Up Event

    Parameters

    Returns Token

    Token of the event listener

onMouseWheel

onTouchEnd

  • Subscribe to Touch End event

    Parameters

    Returns Token

    Token of subscription

onTouchMove

onTouchStart

restore

  • restore(): this
  • Tell the owning chart to restore this component.

    Returns this

    Object itself.

setAutoScrollingEnabled

  • setAutoScrollingEnabled(enabled: boolean): this
  • 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)
    

    Parameters

    • enabled: boolean

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

    Returns this

    Object itself for fluent interface.

setColorShadingStyle

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

    Parameters

    Returns this

    Object itself for fluent interface.

setDepthTestEnabled

  • setDepthTestEnabled(enabled: boolean): this
  • 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)
    

    Parameters

    • enabled: boolean

      Depth test enabled?

    Returns this

    Object itself for fluent interface.

setHighlightOnHover

  • setHighlightOnHover(state: boolean): this
  • 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.

    Parameters

    • state: boolean

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

    Returns this

    Object itself for fluent interface.

setHighlighted

  • setHighlighted(highLight: boolean): this
  • Enable or disable forced highlighting of component

    Parameters

    • highLight: boolean

      True for enabled and false for disabled

    Returns this

    component itself for fluent interface

setLineStyle

  • Set line style of Series.

    Example usage:

    • Construct new SolidLine object
      lineSeries3D.setStrokeStyle( new SolidLine({
         thickness: 5,
         fillStyle: new SolidFill({ color: ColorHEX('#FFF') })
      }) )
      
    • Change thickness of existing SolidLine configuration
      lineSeries.setStrokeStyle( (solidLine) => solidLine
         .setThickness( 5 )
      )
      
    deprecated

    Will be removed in v.4.0. Use setStrokeStyle instead.

    Parameters

    Returns this

    Object itself for fluent interface

setLineStyleHighlight

  • Set line style of Series when it is highlighted.

    Example usage:

    • Construct new SolidLine object
      lineSeries3D.setStrokeStyle( new SolidLine({
         thickness: 5,
         fillStyle: new SolidFill({ color: ColorHEX('#FFF') })
      }) )
      
    • Change thickness of existing SolidLine configuration
      lineSeries.setStrokeStyle( (solidLine) => solidLine
         .setThickness( 5 )
      )
      
    • Assign highlight style automatically based on normal style
      lineSeries.setStrokeStyleHighlight( undefined )
      
    deprecated

    Will be removed in v.4.0. Use setStrokeStyleHighlight instead.

    Parameters

    Returns this

    Object itself for fluent interface.

setMouseInteractions

  • setMouseInteractions(state: boolean): this
  • 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.

    Parameters

    • state: boolean

      Specifies state of mouse interactions

    Returns this

    Object itself for fluent interface

setName

  • setName(name: string): this
  • Sets the name of the Component updating attached LegendBox entries

    Parameters

    • name: string

      Name of the Component

    Returns this

    Object itself

setPointStyle

  • Set point style of Series.

    Example usage:

    • New TriangulatedPoints3D object
      pointLineSeries3D.setPointStyle( new PointStyle3D.Triangulated({
         size: 10,
         shape: 'sphere',
         fillStyle: new SolidFill({ color: ColorHEX('#FFF') })
      }) )
      
    • Change point size
      pointLineSeries3D.setPointStyle( (pointStyle) => pointStyle
         .setSize( 10 )
      )
      
    • Change point shape
      pointLineSeries3D.setPointStyle( (pointStyle) => pointStyle
         .setShape( 'cube' )
      )
      

    NOTE: Currently PointLineSeries3D only supports Solid filled points. Alternatively, PointSeries3D can be used for various dynamic and powerful coloring features. See PointSeries3D.setPointStyle for examples and more information.

    Parameters

    Returns this

    Object itself for fluent interface

setPointStyleHighlight

  • Set point style of Series when it is highlighted.

    Example usage:

    • New TriangulatedPoints3D object
      pointLineSeries3D.setPointStyleHighlight( new PointStyle3D.Triangulated({
         size: 10,
         fillStyle: new SolidFill({ color: ColorHEX('#FFF') })
      }) )
      
    • Change point size
      pointLineSeries3D.setPointStyleHighlight( (pointStyle) => pointStyle
         .setSize( 10 )
      )
      
    • Change point shape
      pointLineSeries3D.setPointStyle( (pointStyle) => pointStyle
         .setShape( 'cube' )
      )
      
    • Assign highlight style automatically based on normal style
      pointLineSeries3D.setPointStyleHighlight( undefined )
      

    Parameters

    Returns this

    Object itself for fluent interface.

setStrokeStyle

  • Set line style of Series.

    Example usage:

    • Construct new SolidLine object
      pointLineSeries3D.setStrokeStyle( new SolidLine({
         thickness: 5,
         fillStyle: new SolidFill({ color: ColorHEX('#FFF') })
      }) )
      
    • Change thickness of existing SolidLine configuration
      pointLineSeries3D.setStrokeStyle( (solidLine) => solidLine
         .setThickness( 5 )
      )
      

    In 3D, line thickness is not configured exactly as pixels (since the size of pixel is not affected by distance from camera).

    However, for usage convenience, you can consider line thickness in 3D as pixels just the same as 2D, even if the resulting visualization will have some differences.

    • Primitive 3D line rendering

    PointLineSeries3D has a special feature for drawing primitive line sets.

    When enabled, this will draw all line segments as exactly 1 pixel thick on the monitor (regardless of distance from camera).

    As a benefit, this is considerably lighter on the GPU, which is especially good with mobile and laptop devices with weak GPUs.

    Primitive drawing is enabled by setting stroke thickness to -1:

     // Enable primitive 3D line drawing.
     pointLineSeries3D.setStrokeStyle((stroke) => stroke.setThickness(-1))
    

    Parameters

    Returns this

    Object itself for fluent interface

setStrokeStyleHighlight

  • Set line style of Series when it is highlighted.

    Example usage:

    • Construct new SolidLine object
      pointLineSeries3D.setStrokeStyle( new SolidLine({
         thickness: 5,
         fillStyle: new SolidFill({ color: ColorHEX('#FFF') })
      }) )
      
    • Change thickness of existing SolidLine configuration
      pointLineSeries3D.setStrokeStyle( (solidLine) => solidLine
         .setThickness( 5 )
      )
      
    • Assign highlight style automatically based on normal style
      pointLineSeries3D.setStrokeStyleHighlight( undefined )
      

    Parameters

    Returns this

    Object itself for fluent interface.