Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ChartXY <CursorPointMarkerType, CursorResultTableBackgroundType, CursorTickMarkerBackgroundTypeX, CursorTickMarkerBackgroundTypeY >

Chart for visualizing data using the Cartesian coordinate system, across any number of Axes. It has a multitude of methods for adding various types of Series.

Charts are created by methods of LightningChart interface or a Dashboard.

The Axes of a ChartXY* can be manipulated with a variety of methods:

Axis operation Method
Get automatically created X Axis ChartXY.getDefaultAxisX()
Add a new Y Axis to right side of ChartXY ChartXY.addAxisY(true)
Remove an Axis Axis.dispose()

Index

Properties

Methods

Properties

engine

engine: PublicEngine

Public, safe interface for Panels rendering engine.

getChartBackgroundStroke

getChartBackgroundStroke: getChartBackgroundStrokeStyle
deprecated

Deprecated in v1.3.0. Use getChartBackgroundStrokeStyle instead.

pixelScale

pixelScale: Vec2<Scale>

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

setChartBackgroundStroke

setChartBackgroundStroke: setChartBackgroundStrokeStyle
deprecated

Deprecated in v1.3.0. Use setChartBackgroundStrokeStyle instead.

uiScale

uiScale: Vec2<Scale>

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

Methods

addAreaRangeSeries

  • Creates range area series for visualization bands of data between the two given lines. Each point in the chart is specified by two y values.

    Parameters

    • Optional options: SeriesOptions

      Options to attach series to axes.

    Returns AreaRangeSeries

    Created series

addAreaSeries

  • Creates area series for visualization of data between the given line and base line limit.

    Type parameters

    Parameters

    • Optional options: AreaSeriesOptions<AreaType>

      Options to attach series to axes, a number for comparisons and defines the type of area series.

    Returns InstanceType<AreaType>

    Created series

addAxisX

  • addAxisX(addTop: boolean, axisTickStrategy?: AxisTickStrategy): Axis
  • Parameters

    • Default value addTop: boolean

      Position of X axis. false = bottom, true = top

    • Optional axisTickStrategy: AxisTickStrategy

      Custom tick strategy for axis that defines positioning and formating of its ticks. See AxisTickStrategies for a collection of options.

    Returns Axis

    Created Axis

addAxisY

  • addAxisY(addRight: boolean, axisTickStrategy?: AxisTickStrategy): Axis
  • Parameters

    • Default value addRight: boolean

      Position of Y axis. false = left, true = right

    • Optional axisTickStrategy: AxisTickStrategy

      Custom tick strategy for axis that defines positioning and formating of its ticks. See AxisTickStrategies for a collection of options.

    Returns Axis

    Created Axis

addBoxSeries

  • Create Series for visualization of data with quartiles.

    Type parameters

    • FigureType: BoxFigure

    Parameters

    • Optional options: BoxSeriesOptions<FigureType>

      Options to attach series to axes, type of StatisticFigure and type of dimensionStrategy.

    Returns BoxSeries<FigureType>

    Created series

addChartMarkerXY

  • addChartMarkerXY(cursorBuilder: StaticCursorXYBuilder<PointMarkerType, ResultTableBackgroundType, TickMarkerBackgroundTypeX, TickMarkerBackgroundTypeY>, axisX?: Axis, axisY?: Axis): ChartMarkerXY<PointMarkerType, ResultTableBackgroundType, TickMarkerBackgroundTypeX, TickMarkerBackgroundTypeY>
  • Create new XY Chart Marker to be rendered as part of UI.

    Type parameters

    Parameters

    • Default value cursorBuilder: StaticCursorXYBuilder<PointMarkerType, ResultTableBackgroundType, TickMarkerBackgroundTypeX, TickMarkerBackgroundTypeY>

      Optional StaticCursorBuilderXY to customize structure/style of chartMarker. MarkerBuilders.XY can be used to build a custom one from scratch.

    • Optional axisX: Axis

      Optional arbitrary X axis to attach ChartMarker on

    • Optional axisY: Axis

      Optional arbitrary Y axis to attach ChartMarker on

    Returns ChartMarkerXY<PointMarkerType, ResultTableBackgroundType, TickMarkerBackgroundTypeX, TickMarkerBackgroundTypeY>

    Created ChartMarker

addEllipseSeries

  • Create Series for drawing ellipses.

    Parameters

    • Optional options: SeriesOptions

      Options to attach series to axes.

    Returns EllipseSeries

    Created series

addHeatmapSeries

  • Creates heatmap intensity series for visualization of magnitude.

    Type parameters

    Parameters

    • options: IntensitySeriesOptions<IntensityType>

      Options to attach series to axes, major settings and defines the type of area series.

    Returns InstanceType<IntensityType>

    Created series

addLegendBox

  • Add a stand-alone LegendBox using a builder.

    Type parameters

    • UIElementType: UIPart

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

    Parameters

    • Default value builder: UIElementBuilder<UIElementType>

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

    • Default value 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 continuous lines.

    Parameters

    • Optional options: LineSeriesOptions

      Options to attach series to axes and define the type of data pattern.

    Returns LineSeries

    LineSeries.

addOHLCSeries

  • addOHLCSeries(options?: OHLCSeriesOptions<PositiveFigure, NegativeFigure, OHLCSeriesType>): OHLCSeriesType
  • Create Series for visualization of OHLC segments.

    Type parameters

    Parameters

    • Optional options: OHLCSeriesOptions<PositiveFigure, NegativeFigure, OHLCSeriesType>

      Options to attach series to axes, define type of OHLCFigure used for positive segments, negative segments and series.

    Returns OHLCSeriesType

    Created OHLCSeries whose interface is related to value of 'seriesConstructor' parameter

addPointLineSeries

  • Create Plot for visualization of data by points and lines

    Parameters

    • Optional options: PointSeriesOptions

      Options to attach series to axes and define the shape for points of series.

    Returns PointLineSeries

    Created plot

addPointSeries

  • Create Series for visualization of data by points.

    Parameters

    • Optional options: PointSeriesOptions

      Options to attach series to axes and define the shape for points of series.

    Returns PointSeries

    Created series.

addRectangleSeries

  • Create Series for drawing rectangles.

    Parameters

    • Optional options: SeriesOptions

      Options to attach series to axes.

    Returns RectangleSeries

    Created series

addSegmentSeries

  • Create Series for visualization of data by individual line-segments

    Parameters

    • Optional options: SeriesOptions

      Options to attach series to axes.

    Returns SegmentSeries

    Created series

addSplineSeries

  • Create Series for visualization of data by points and lines, where the segments between the data points are smoothed.

    Parameters

    • Optional options: SplineSeriesOptions

      Options to attach series to axes and define the shape for points of series.

    Returns SplineSeries

    Created series

addStepSeries

  • Create Series for visualization of data by points and lines. Apply steps to the line curve.

    Parameters

    • Optional options: StepSeriesOptions

      Options to attach series to axes and define the shape for points of series, step behavior for StepSeries. Possible values are 'before', 'middle' and 'after', defaults to StepOptions.before.

    Returns StepSeries

    Created series

addUIElement

  • Add a stand-alone UIElement using a builder.

    Type parameters

    • UIElementType: UIPart

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

    Parameters

    • Default value builder: UIElementBuilder<UIElementType>

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

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

forEachAxisX

  • forEachAxisX(clbk: function): void
  • Operate on each x axis of chart

    Parameters

    • clbk: function

      Callback function for axis

        • Parameters

          Returns void

    Returns void

forEachAxisY

  • forEachAxisY(clbk: function): void
  • Operate on each y axis of chart

    Parameters

    • clbk: function

      Callback function for axis

        • Parameters

          Returns void

    Returns void

getAutoCursor

  • getAutoCursor(): AutoCursorXY<CursorPointMarkerType, CursorResultTableBackgroundType, CursorTickMarkerBackgroundTypeX, CursorTickMarkerBackgroundTypeY>
  • Returns AutoCursorXY<CursorPointMarkerType, CursorResultTableBackgroundType, CursorTickMarkerBackgroundTypeX, CursorTickMarkerBackgroundTypeY>

    Auto cursor object

getAutoCursorMode

  • Get current mode of charts Auto cursor

    Returns AutoCursorModes

    Value from enum AutoCursorMode

getAxes

  • getAxes(...axisPositions: AxisPosition[]): Axis[]
  • Parameters

    • Rest ...axisPositions: AxisPosition[]

      array of axis positions which have to be included to the output empty array indicates all of positions are included

    Returns Axis[]

    An array of axis

getBackgroundFillStyle

  • Get fillstyle of chart background.

    Returns FillStyle

    FillStyle

getBackgroundStrokeStyle

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

    Returns LineStyle

    LineStyle

getChartBackgroundFillStyle

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

    Returns FillStyle

    FillStyle

getChartBackgroundStrokeStyle

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

    Returns LineStyle

    LineStyle

getDefaultAxisX

  • getDefaultAxisX(): Axis
  • Returns Axis

    Primary X axis is the bottom one. If there is no bottom axis, the top one became default.

getDefaultAxisY

  • getDefaultAxisY(): Axis
  • Returns Axis

    Primary Y axis is the left one. If there is no left axis, the right one became default.

getFittingRectangleFillStyle

  • Get fillStyle for fitting rectangle when fitting.

    Returns FillStyle

    FillStyle

getFittingRectangleStrokeStyle

  • getFittingRectangleStrokeStyle(): LineStyle
  • Get stroke style for fitting rectangle when fitting.

    Returns LineStyle

    LineStyle

getMinimumSize

  • getMinimumSize(): Point | undefined
  • Get minimum size of Panel. Depending on the type of class this value might be automatically computed to fit different elements.

    Returns Point | undefined

    Vec2 minimum size or undefined if unimplemented

getMouseInteractionPan

  • getMouseInteractionPan(): boolean
  • Get is mouse-interaction enabled: Panning axes by dragging mouse on frame.

    Returns boolean

    Boolean flag

getMouseInteractionRectangleFit

  • getMouseInteractionRectangleFit(): boolean
  • Get is mouse-interaction enabled: Fitting axes by capturing rectangle on frame.

    Returns boolean

    Boolean flag

getMouseInteractionRectangleZoom

  • getMouseInteractionRectangleZoom(): boolean
  • Get is mouse-interaction enabled: Zooming axes by capturing rectangle on frame.

    Returns boolean

    Boolean flag

getMouseInteractionWheelZoom

  • getMouseInteractionWheelZoom(): boolean
  • Get is mouse-interaction enabled: Zooming axes with mouse-wheel on frame.

    Returns boolean

    Boolean flag

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.

getMouseInteractionsWhileZooming

  • getMouseInteractionsWhileZooming(): boolean
  • Get if mouse and cursor interactions are disabled during zooming 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

getSeries

  • getSeries(): SeriesXY[]
  • Get series of a chart

    Returns SeriesXY[]

    series

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

getZoomingRectangleFillStyle

  • Get fillStyle for zooming rectangle when zooming.

    Returns FillStyle

    FillStyle

getZoomingRectangleStrokeStyle

  • getZoomingRectangleStrokeStyle(): LineStyle
  • Get stroke style for zooming rectangle when zooming.

    Returns LineStyle

    LineStyle

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:

    Desired result Arguments
    Download 'screenshot.png' 'screenshot'
    Attempt download 'maybeNotSupported.bmp' 'maybeNotSupported', 'image/bmp'
    Attempt download jpeg.file with specified compression quality '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.

    • Optional type: undefined | string

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

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

setAutoCursor

  • setAutoCursor(mutator: Mutator<AutoCursorXY<CursorPointMarkerType, CursorResultTableBackgroundType, CursorTickMarkerBackgroundTypeX, CursorTickMarkerBackgroundTypeY>>): this
  • Mutator function for charts auto cursor.

    Parameters

    • mutator: Mutator<AutoCursorXY<CursorPointMarkerType, CursorResultTableBackgroundType, CursorTickMarkerBackgroundTypeX, CursorTickMarkerBackgroundTypeY>>

      Mutator function for a Cursor

    Returns this

    Object itself for fluent interface

setAutoCursorMode

  • Set mode of charts Auto cursor

    Parameters

    Returns this

    Object itself for fluent interface

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

setChartBackgroundFillStyle

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

    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'.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or mutator to modify existing one

    Returns this

    Object itself

setFittingRectangleFillStyle

  • Set fillStyle for zooming rectangle when fitting.

    Parameters

    Returns this

    Object itself

setFittingRectangleStrokeStyle

  • setFittingRectangleStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this
  • Set stroke style for zooming rectangle when fitting.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or mutator to modify existing one

    Returns this

    Object itself

setMouseBackgroundStyle

  • setMouseBackgroundStyle(mouseStyle: string): this
  • Set mouse style when hovering over chart background.

    Parameters

    • Default value mouseStyle: string

      Mouse-style preset name (see MouseStyles)

    Returns this

    Object itself

setMouseFitStyle

  • setMouseFitStyle(mouseStyle: string): this
  • Set mouse style when fitting over chart background.

    Parameters

    • Default value mouseStyle: string

      Mouse-style preset name (see MouseStyles)

    Returns this

    Object itself

setMouseInteractionPan

  • setMouseInteractionPan(enabled: boolean): this
  • Set is mouse-interaction enabled: Panning axes by dragging mouse on frame.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

    Object itself

setMouseInteractionRectangleFit

  • setMouseInteractionRectangleFit(enabled: boolean): this
  • Set is mouse-interaction enabled: Fitting axes by capturing rectangle on frame.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

    Object itself

setMouseInteractionRectangleZoom

  • setMouseInteractionRectangleZoom(enabled: boolean): this
  • Set is mouse-interaction enabled: Zooming axes by capturing rectangle on frame.

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

    Object itself

setMouseInteractionWheelZoom

  • setMouseInteractionWheelZoom(enabled: boolean): this
  • Set is mouse-interaction enabled: Zooming axes with mouse-wheel on frame (also touch pinch currently).

    Parameters

    • enabled: boolean

      Boolean flag

    Returns this

    Object itself

setMouseInteractions

  • setMouseInteractions(enabled: boolean): this
  • Set all mouse-interaction flags at once.

    Parameters

    • enabled: boolean

      Are mouse-interactions enabled

    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.

setMouseInteractionsWhileZooming

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

    Parameters

    • state: boolean

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

    Returns this

    Chart itself for fluent interface.

setMousePanStyle

  • setMousePanStyle(mouseStyle: string): this
  • Set mouse style when panning over chart background.

    Parameters

    • Default value mouseStyle: string

      Mouse-style preset name (see MouseStyles)

    Returns this

    Object itself

setMouseZoomStyle

  • setMouseZoomStyle(mouseStyle: string): this
  • Set mouse style when zooming over chart background.

    Parameters

    • Default value mouseStyle: string

      Mouse-style preset name (see MouseStyles)

    Returns this

    Object itself

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

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:

    Desired result Argument
    Specified FillStyle new SolidFill({ color: ColorHEX('#F00') })
    Changed transparency (solidFill) => solidFill.setA(80)
    Hidden emptyFill

    Parameters

    Returns this

    Chart itself

setTitleFont

  • Set font of Chart Title.

    Example usage:

    Desired result Argument
    Specified FontSettings new FontSettings({ size: 24, style: 'italic' })
    Set to bold (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

setZoomingRectangleFillStyle

  • Set fillStyle for zooming rectangle when zooming.

    Parameters

    Returns this

    Object itself

setZoomingRectangleStrokeStyle

  • setZoomingRectangleStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this
  • Set stroke style for zooming rectangle when zooming.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or mutator to modify existing one

    Returns this

    Object itself

solveNearest

  • Solves the nearest data-point from series inside Chart of a given coordinate on screen

    Parameters

    • Default value location: Point | undefined

      Location on screen or omit for cur mouse location

    Returns undefined | CursorPoint

    Undefined or data-structure for positioning of markers (and cursors)