Hierarchy

Implements

Properties

boundaries: Interval<Point>

Boundaries of BoxFigure. Constant and computed in constructor.

dimensionStrategy: MultidimensionalStrategy
end: number
lowerExtreme: number
lowerQuartile: number
median: number
scale: LinearScaleXY
start: number
upperExtreme: number
upperQuartile: number

Accessors

  • get draggable(): boolean
  • Returns boolean

  • set draggable(state: boolean): void
  • Parameters

    • state: boolean

    Returns void

Methods

  • Get boundaries that contain figure.

    Returns

    Interval

    Returns Interval<Point>

  • Add callback function to be triggered when specified event is fired.

     // Example syntax
    object.addEventListener('click', (event) => {
    console.log(event)
    })

    Some classes also report extra information about the interacted object with the second parameter:

     // Most series share information about interacted data point
    series.addEventListener('click', (event, info) => {
    console.log(info)
    })

    Optional third parameter allows registering event handlers that will automatically remove themselves after first trigger:

     // Example this listener will only fire once
    object.addEventListener('click', (event) => {})

    Each class has its own list of supported events. Some events are from HTML standard (click, pointerdown, etc.), while others are own events from LightningChart JS (dispose, resize, etc.)

    To find what events are available, you can try following:

    • If your development environment has TypeScript enabled, just write addEventListener and see what possible event types the IDE suggests. These APIs are strongly typed, and even the callback event will be correctly typed.
    • Otherwise, open the class section in API documentation and check out which interface K type parameter extends.

    Type Parameters

    Parameters

    Returns void

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

  • Get fill style of box body when not highlighted.

    Returns

    FillStyle object

    Returns FillStyle

  • Get style of box body when not highlighted.

    Returns

    LineStyle object

    Returns LineStyle

  • Get width of box body as a % of the width of its interval width.

    Returns

    Ratio between box body width and the segments interval

    Returns number

  • Get stroke style of box median line when not highlighted.

    Returns

    LineStyle object

    Returns LineStyle

  • Returns

    Mouse interactions state

    Returns boolean

  • Get stroke style of box whiskers and tails when not highlighted.

    Returns

    LineStyle object

    Returns LineStyle

  • Get width of box tails as a % of the width of its interval width.

    Returns

    Ratio between box tail width and the segments interval

    Returns number

  • Get element visibility.

    Returns

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

    Returns boolean

  • Check whether the object is disposed. Disposed objects should not be used!

    Returns

    true if object is disposed.

    Returns boolean

  • Remove event listener added using addEventListener. The expected argument should be the exact same callback function that was supplied using addEventListener:

     // Basic example syntax
    const listener = () => {}
    obj.addEventListener('click', listener)
    obj.removeEventListener('click', listener)
     // Basic boilerplate of custom interaction when user drags on an object
    obj.addEventListener('pointerdown', (eventDown) => {
    let prevCoord = eventDown
    const handlePointerMove: LCJSInteractionEventListener<'pointermove'> = (eventMove) => {
    const delta = { x: eventMove.clientX - prevCoord.clientX, y: eventMove.clientY - prevCoord.clientY }
    prevCoord = eventMove
    console.log(delta, eventMove.clientX, eventMove.clientY)
    }
    const handlePointerUp: LCJSInteractionEventListener<'pointerup'> = (eventUp) => {
    window.removeEventListener('pointermove', handlePointerMove)
    window.removeEventListener('pointerup', handlePointerUp)
    }
    window.addEventListener('pointermove', handlePointerMove)
    window.addEventListener('pointerup', handlePointerUp)
    })

    Type Parameters

    Parameters

    Returns void

  • Set fill style of Series.

    Example Usage:

    // Specified FillStyle
    BoxAndWhiskers.setBodyFillStyle(new SolidFill({ color: ColorHEX('#F00') }))
    // Changed transparency
    BoxAndWhiskers.setBodyFillStyle((solidFill) => solidFill.setA(80))
    // Hidden (emptyFill is not supported)
    BoxAndWhiskers.setBodyFillStyle(transparentFill)

    Returns

    Series itself for fluent interface.

    Parameters

    Returns BoxFigure

  • Set border style of Series.

    // Specified SolidLine
    BoxAndWhiskers.setBodyStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
    // Changed thickness
    BoxAndWhiskers.setBodyStrokeStyle((solidLine) => solidLine.setThickness(5))
    // Hidden (emptyLine is not supported)
    BoxAndWhiskers.setBodyStrokeStyle(transparentLine)

    Returns

    Series itself for fluent interface.

    Parameters

    Returns BoxFigure

  • Set width of box body as a % of the width of its interval width.

    Returns

    Object itself

    Parameters

    • width: number

      Ratio between box body width and the segments interval

    Returns BoxFigure

  • Set stroke style of Series median line.

    Example usage:

    // Specified LineStyle
    BoxAndWhiskers.setMedianStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
    // Changed thickness
    BoxAndWhiskers.setMedianStrokeStyle((solidLine) => solidLine.setThickness(5))
    // Hidden (emptyLine is not supported)
    BoxAndWhiskers.setMedianStrokeStyle(transparentLine)

    Returns

    Chart itself

    Parameters

    Returns BoxFigure

  • Set mouse interactions enabled or disabled

    Returns

    Object itself for fluent interface

    Parameters

    • state: boolean

      Specifies state of mouse interactions

    Returns BoxFigure

  • Set stroke style of Series whiskers and tails.

    Supported line styles:

    Example usage:

    // Specified LineStyle
    BoxAndWhiskers.setStrokeStyle(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
    // Changed thickness
    BoxAndWhiskers.setStrokeStyle((solidLine) => solidLine.setThickness(5))
    // Hidden (emptyLine is not supported)
    BoxAndWhiskers.setStrokeStyle(transparentLine)

    Returns

    Chart itself

    Parameters

    Returns BoxFigure

  • Set width of box tails as a % of the width of its interval width.

    Returns

    Object itself

    Parameters

    • width: number

      Ratio between box tail width and the segments interval

    Returns BoxFigure

  • Set element visibility.

    Returns

    Object itself.

    Parameters

    • state: boolean

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

    Returns BoxFigure