Class ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

Chart type for visualizing data between two dimensions, X and Y. It has built-in Axis functionality, and supports a large set of series types.

ChartXY can be created in two different ways - to learn more about creation time configuration of ChartXY, please refer to:

ChartXY features

  1. Axes

ChartXY always has at least one X and Y axes.

The default Axis can be referenced with getDefaultAxisX and getDefaultAxisY. See Axis for features of axis.

ChartXY doesn't have a limit on number of axes. Additional axes can be created with addAxisX and addAxisY. Multiple Axes can be stacked on top of another, and axes can be positioned on either side of the chart (left, right, top, bottom, see AxisOptions).

  1. Series

ChartXY supports a variety of different series types, each with their own method of data visualization. Series are created with ChartXY.add...Series methods, for example:

When created, a series is always attached to a pair of X and Y Axes. The Axes can be specified by user, or the chart default Axes will be used.

  1. AutoCursor

Auto cursor is activated when the users mouse is over the chart. It automatically solves the nearest data point to the mouse, and displays it to the user over the chart in a result table.

Auto cursor can be configured in a variety of ways; on chart level, the cursor behavior and style can be specified using:

On series level, the cursor behavior can be configured individually for each series:

  • setCursorEnabled | configure whether cursor should pick on the series or not.
  • setCursorResultTableFormatter | configure formatting of result table contents, when this series is pointed.
  • setCursorInterpolationEnabled | configure whether cursor should interpolate the displayed data point between the two closest data points, or snap to the nearest real data point.
  • setCursorSolveBasis | configure basis of finding nearest data point for the series ('nearest-x', 'nearest', etc.).
  1. LegendBox

ChartXY has built-in legend box functionality for listing the series names in a user interface. The legend box also provides additional logic, like hiding selected series by clicking on the legend box, and visualizing color look-up tables (LUT) in applications where they are used.

Legend box is added using addLegendBox.

  1. Title

ChartXY has a built-in title component, which can be configured using setTitle.

  1. Backgrounds

ChartXY contains two separate background components:

  1. UI Elements

Custom UI elements can be placed on ChartXY in same way as all other charts, using addUIElement.

Other APIs worthy of mention:

Type Parameters

Hierarchy

Implements

Properties

Methods

addAreaRangeSeries addAreaSeries addAxisX addAxisY addBoxSeries addChartMarkerXY addEllipseSeries addHeatmapGridSeries addHeatmapScrollingGridSeries addLegendBox addLineSeries addOHLCSeries addOnScreenMenu addPointLineSeries addPointSeries addPolygonSeries addRectangleSeries addSegmentSeries addSplineSeries addStepSeries addUIElement dispose forEachAxis forEachAxisX forEachAxisY getAnimationsEnabled getAutoCursor getAutoCursorEnabledDuringAxisAnimation getAutoCursorMode getAxes getBackgroundFillStyle getBackgroundStrokeStyle getDefaultAxes getDefaultAxisX getDefaultAxisY getFittingRectangleFillStyle getFittingRectangleStrokeStyle getMinimumSize getMouseInteractionPan getMouseInteractionRectangleFit getMouseInteractionRectangleZoom getMouseInteractionWheelZoom getPadding getSeries getSeriesBackgroundEffect getSeriesBackgroundFillStyle getSeriesBackgroundStrokeStyle getTheme getTitle getTitleEffect getTitleFillStyle getTitleFont getTitleMargin getTitlePosition getTitleRotation getTitleSize getZoomingRectangleFillStyle getZoomingRectangleStrokeStyle offBackgroundMouseClick offBackgroundMouseDoubleClick offBackgroundMouseDown offBackgroundMouseDrag offBackgroundMouseDragStart offBackgroundMouseDragStop offBackgroundMouseEnter offBackgroundMouseLeave offBackgroundMouseMove offBackgroundMouseTouchStart offBackgroundMouseUp offBackgroundMouseWheel offBackgroundTouchEnd offBackgroundTouchMove 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 onDispose onResize onSeriesBackgroundMouseClick onSeriesBackgroundMouseDoubleClick onSeriesBackgroundMouseDown onSeriesBackgroundMouseDrag onSeriesBackgroundMouseDragStart onSeriesBackgroundMouseDragStop onSeriesBackgroundMouseEnter onSeriesBackgroundMouseLeave onSeriesBackgroundMouseMove onSeriesBackgroundMouseUp onSeriesBackgroundMouseWheel onSeriesBackgroundTouchEnd onSeriesBackgroundTouchMove onSeriesBackgroundTouchStart pan saveToFile setAnimationsEnabled setAutoCursor setAutoCursorEnabledDuringAxisAnimation setAutoCursorMode setBackgroundFillStyle setBackgroundStrokeStyle setFittingRectangleFillStyle setFittingRectangleStrokeStyle setMouseBackgroundStyle setMouseFitStyle setMouseInteractionPan setMouseInteractionRectangleFit setMouseInteractionRectangleZoom setMouseInteractionWheelZoom setMouseInteractions setMousePanStyle setMouseZoomStyle setPadding setSeriesBackgroundEffect setSeriesBackgroundFillStyle setSeriesBackgroundStrokeStyle setSeriesHighlightOnHover setTitle setTitleEffect setTitleFillStyle setTitleFont setTitleMargin setTitlePosition setTitleRotation setZoomingRectangleFillStyle setZoomingRectangleStrokeStyle solveNearest zoom

Properties

_isPanningActive: boolean = false
_isZoomingActive: boolean = false
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).

Methods

  • Method for adding a new AreaRangeSeries to the chart. This series type is used for visualizing bands of data between two curves of data. AreaRangeSeries is optimized for large amounts of data - here are some reference specs to give an idea:

    • A static data set in millions range is rendered in a matter of seconds.
    • With streaming data, tens of thousands data points can be streamed in every second, while retaining an interactive document.

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

    Readonly configuration:

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

     // Example,
    const series = ChartXY.addAreaRangeSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to AreaRangeSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: AreaRangeSeriesOptions

      Optional object with readonly configuration arguments for AreaRangeSeries.

    Returns AreaRangeSeries

  • Method for adding a new AreaSeries to the chart. This series type is used for visualizing area between a static base line and supplied curve data. AreaSeries is optimized for large amounts of data - here are some reference specs to give an idea:

    • A static data set in millions range is rendered in a matter of seconds.
    • With streaming data, tens of thousands data points can be streamed in every second, while retaining an interactive document.

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

    Readonly configuration:

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

     // Example,
    const series = ChartXY.addAreaSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to AreaSeriesOptions.

    Return type:

    AreaSeries return type depends on supplied readonly configuration! Specifically, type.

    Configuration type Return series type
    undefined or omitted AreaSeriesPositive
    AreaSeriesTypes.Positive AreaSeriesPositive
    AreaSeriesTypes.Negative AreaSeriesNegative
    AreaSeriesTypes.Bipolar AreaSeriesBipolar

    Returns

    New series.

    Type Parameters

    Parameters

    • Optional options: AreaSeriesOptions<AreaType>

      Optional object with readonly configuration arguments for AreaSeries.

    Returns InstanceType<AreaType>

  • Method for adding a new BoxSeries to the chart. This series type is used for visualizing data groups through quartiles.

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

    Readonly configuration:

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

     // Example,
    const series = ChartXY.addBoxSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to BoxSeriesOptions.

    Returns

    New series.

    Type Parameters

    Parameters

    • Optional options: BoxSeriesOptions<FigureType>

      Optional object with readonly configuration arguments for BoxSeries.

    Returns BoxSeries<FigureType>

  • Create new XY Chart Marker to be rendered as part of UI.

    Returns

    Created ChartMarker

    Type Parameters

    Parameters

    • cursorBuilder: StaticCursorXYBuilder<PointMarkerType, ResultTableBackgroundType> = ...

      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>

  • Method for adding a new EllipseSeries to the chart. This series type visualizes a collection of ellipses.

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

    Readonly configuration:

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

     // Example,
    const series = ChartXY.addEllipseSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to EllipseSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: EllipseSeriesOptions

      Optional object with readonly configuration arguments for EllipseSeries.

    Returns EllipseSeries

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

    HeatmapGridSeries is optimized for massive amounts of data - here are some reference specs on average PC to give an idea:

    • Heatmap Chart with 1 million data points (1000x1000) is cold started in ~0.3 seconds.
    • Heatmap Chart with 1 million data points (1000x1000) is re-populated (change data set) in ~0.050 seconds.
    • Heatmap Chart with 16 million data points (4000x4000) is cold started in ~2.0 seconds.
    • Heatmap Chart with 16 million data points (4000x4000) is re-populated (change data set) in ~0.5 seconds.

    HeatmapGridSeries max data amount is entirely restricted by the client hardware RAM and more specifically amount of RAM usable by the context running LightningChart JS. If by increasing the amount of columns and rows you encounter suddenly weak performance, it is likely that there is not enough RAM memory available.

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

    Readonly configuration:

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

     // Example,
    const series = ChartXY.addHeatmapGridSeries({
    columns: 100,
    rows: 100
    })

    To learn about available properties, refer to HeatmapGridSeriesOptions.

    Heatmap data format is specified with heatmapDataType: 'intensity' property; in this case, each cell of the heatmap is associated with a numeric intensity value, which can be used in conjuction with a Color look up table (LUT).

    For scrolling heatmap grids, see addHeatmapScrollingGridSeries.

    Returns

    Heatmap Grid Series.

    Parameters

    Returns HeatmapGridSeriesIntensityValues

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

    HeatmapScrollingGridSeries is optimized for massive amounts of data - here are some reference specs on average PC to give an idea:

    • Scrolling Heatmap Chart with 2 million incoming data points per second (rows: 2048, 1000 columns/s) runs consistently and smoothly with 60 FPS and no stuttering. CPU usage stays easily below 40%.
    • Scrolling Heatmap Chart with 8 million incoming data points per second (rows: 4096, 2000 columns/s) runs consistently and smoothly with 60 FPS and minor stuttering.

    HeatmapScrollingGridSeries max data amount is entirely restricted by the client hardware RAM and more specifically amount of RAM usable by the context running LightningChart JS. If performance suddenly plummets at some approximate data threshold, then it is likely that there is not enough RAM available. Use data cleaning configuration and suitable Axis intervals to adjust to your hardware limitations.

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

    Readonly configuration:

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

     // Example,
    const series = ChartXY.addHeatmapGridSeries({
    resolution: 100
    })

    To learn about available properties, refer to HeatmapScrollingGridSeriesOptions.

    Heatmap data format is specified with heatmapDataType: 'intensity' property; in this case, each cell of the heatmap is associated with a numeric intensity value, which can be used in conjuction with a Color look up table (LUT).

    For static heatmap grids, see addHeatmapGridSeries.

    Returns

    Scrolling Heatmap Grid Series.

    Parameters

    Returns HeatmapScrollingGridSeriesIntensityValues

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

    For more information on LegendBox features, and usage, see LegendBox.

    Returns

    LegendBox

    Parameters

    • Optional builder: UILegendBoxBuilder<InternalBackground>

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

    • Optional scale: UserScaleDefinition

      Optional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in pixels.

    Returns LegendBox<UIBackground>

  • Method for adding a new LineSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates), with a continuous stroke. LineSeries 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.
    • 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 LineSeries.

    Readonly configuration:

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

     // Example,
    const lineSeries = ChartXY.addLineSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to LineSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: LineSeriesOptions

      Optional object with readonly configuration arguments for LineSeries.

    Returns LineSeries

  • Method for adding a new OHLCSeries to the chart. This series type is used for visualizing trading figures.

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

    Readonly configuration:

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

     // Example,
    const series = ChartXY.addOHLCSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to OHLCSeriesOptions.

    Returns

    New series.

    Type Parameters

    Parameters

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

      Optional object with readonly configuration arguments for OHLCSeries.

    Returns OHLCSeriesType

  • Method for adding a new PointLineSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates), with a continuous stroke and configurable markers over each coordinate. PointLineSeries 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.
    • 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 PointLineSeries.

    Readonly configuration:

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

     // Example,
    const pointLineSeries = ChartXY.addPointLineSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to PointLineSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: PointLineSeriesOptions

      Optional object with readonly configuration arguments for PointLineSeries.

    Returns PointLineSeries

  • Method for adding a new PointSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates), with configurable markers over each coordinate. PointSeries 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.
    • 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 PointSeries.

    Readonly configuration:

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

     // Example,
    const pointSeries = ChartXY.addPointSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to PointSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: PointSeriesOptions

      Optional object with readonly configuration arguments for PointSeries.

    Returns PointSeries

  • Method for adding a new PolygonSeries to the chart. This series type visualizes a collection of polygons.

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

    Readonly configuration:

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

     // Example,
    const polygonSeries = ChartXY.addPolygonSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to PolygonSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: PolygonSeriesOptions

      Optional object with readonly configuration arguments for PolygonSeries.

    Returns PolygonSeries

  • Method for adding a new RectangleSeries to the chart. This series type visualizes a collection of rectangles.

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

    Readonly configuration:

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

     // Example,
    const rectSeries = ChartXY.addRectangleSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to RectangleSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: RectangleSeriesOptions

      Optional object with readonly configuration arguments for RectangleSeries.

    Returns RectangleSeries

  • Method for adding a new SegmentSeries to the chart. This series type visualizes a collection of line segments (A -> B).

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

    Readonly configuration:

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

     // Example,
    const series = ChartXY.addSegmentSeries({
    // Specify non-default X Axis to attach series to.
    xAxis: myNonDefaultAxisX
    })

    To learn about available properties, refer to SegmentSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: SegmentSeriesOptions

      Optional object with readonly configuration arguments for SegmentSeries.

    Returns SegmentSeries

  • Method for adding a new SplineSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates), with a smoothed curve stroke + point markers over each data point.

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

    Readonly configuration:

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

     // Example,
    const splineSeries = ChartXY.addSplineSeries({
    // Select shape of point markers.
    pointShape: PointShape.Circle
    })

    To learn about available properties, refer to SplineSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: SplineSeriesOptions

      Optional object with readonly configuration arguments for SplineSeries.

    Returns SplineSeries

  • Method for adding a new StepSeries to the chart. This series type visualizes a list of Points (pair of X and Y coordinates), with a stepped stroke + point markers over each data point.

    Possible step modes are: 'before', 'middle' and 'after'.

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

    Readonly configuration:

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

     // Example,
    const stepSeries = ChartXY.addStepSeries({
    // Select shape of point markers.
    pointShape: PointShape.Circle
    })

    To learn about available properties, refer to StepSeriesOptions.

    Returns

    New series.

    Parameters

    • Optional options: StepSeriesOptions

      Optional object with readonly configuration arguments for StepSeries.

    Returns StepSeries

  • 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 ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Operate on each axis of chart, x and y

    Parameters

    • clbk: ((axis: Axis) => void)

      Callback function for axis

        • (axis: Axis): void
        • Parameters

          Returns void

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Operate on each x axis of chart

    Parameters

    • clbk: ((axis: Axis, i: number, arr: Axis[]) => void)

      Callback function for axis

        • (axis: Axis, i: number, arr: Axis[]): void
        • Parameters

          Returns void

    Returns void

  • Operate on each y axis of chart

    Parameters

    • clbk: ((axis: Axis, i: number, arr: Axis[]) => void)

      Callback function for axis

        • (axis: Axis, i: number, arr: Axis[]): void
        • Parameters

          Returns void

    Returns void

  • Get reference to charts AutoCursor.

    See AutoCursorXY for all available methods for configuring the AutoCursor.

    Returns

    AutoCursor.

    Returns AutoCursorXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Get current AutoCursor during Axis animations state.

    Axis Animations are Axis Scale changes that are animated, such as Zooming and Scrolling done by using API (such as Axis.setInterval) or by using the mouse to click & drag on the Chart.

    Returns

    True if AutoCursor is enabled during Axis Animations, false if not.

    Returns boolean

  • Returns

    An array of 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[]

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

    Equal to [ChartXY.getDefaultAxisX(), ChartXY.getDefaultAxisY()]

    Intended for conveniently applying same modifications to both X and Y axes.

    // Example, disable mouse interactions from both default axes.
    ChartXY.getDefaultAxes().forEach((axis) => axis.setMouseInteractions(false))

    Returns

    [chart.getDefaultAxisX(), chart.getDefaultAxisY()]

    Returns [Axis, Axis]

  • Get reference to the default X Axis of the ChartXY.

    This will always return reference to the X Axis that is closest to the chart (starting from bottom). The user can safely destroy the default Axis (with dispose, as long as there are no series attached to it).

    Returns

    Default X Axis of chart.

    Returns Axis

  • Get reference to the default Y Axis of the ChartXY.

    This will always return reference to the Y Axis that is closest to the chart (starting from left). The user can safely destroy the default Axis (with dispose, as long as there are no series attached to it).

    Returns

    Default Y Axis of chart.

    Returns Axis

  • Get fillStyle for fitting rectangle when fitting.

    Returns

    FillStyle

    Returns FillStyle

  • Get stroke style for fitting rectangle when fitting.

    Returns

    LineStyle

    Returns LineStyle

  • Get minimum size of Panel. 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: Panning axes by dragging mouse on frame.

    Returns

    Boolean flag

    Returns boolean

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

    Returns

    Boolean flag

    Returns boolean

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

    Returns

    Boolean flag

    Returns boolean

  • Get is mouse-interaction enabled: Zooming axes with mouse-wheel on frame.

    Returns

    Boolean flag

    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

  • 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 position of ChartXY title.

    Returns

    Title position.

    Returns "right-top" | "left-top" | "right-bottom" | "left-bottom" | "center-top" | "center-bottom" | "series-center-top" | "series-right-top" | "series-left-top" | "series-center-bottom" | "series-right-bottom" | "series-left-bottom"

  • Get fillStyle for zooming rectangle when zooming.

    Returns

    FillStyle

    Returns FillStyle

  • Get stroke style for zooming rectangle when zooming.

    Returns

    LineStyle

    Returns LineStyle

  • 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

  • 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 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: ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>) => unknown)

      Handler function for event

        • (object: ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>): unknown
        • Parameters

          • object: ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

          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

  • Method pans axes by pixels.

    // Pan the chart 100 pixels to right.
    chart.pan({x: 100, y: 0})

    Parameters

    • delta: Point

      Amount to pan X/Y in pixels

    Returns void

  • 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 ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Disable/Enable all animations of the Chart.

    Returns

    Chart itself for fluent interface.

    Parameters

    • animationsEnabled: boolean

      Boolean value to enable or disable animations.

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Style chart AutoCursor using a callback function.

     // Example syntax
    ChartXY.setAutoCursor((autoCursor) => autoCursor
    // `autoCursor` is of type AutoCursorXY, use its API for styling the cursor.
    .setGridStrokeXStyle(new SolidLine({
    thickness: 1,
    fillStyle: new SolidFill({ color: ColorRGBA( 255, 0, 0 ) })
    }))
    )

    See AutoCursorXY for all available methods for configuring the AutoCursor.

    Example usage:

     // Example 1, disable Y Axis tick marker & grid line.
    ChartXY.setAutoCursor((autoCursor) => autoCursor
    .setTickMarkerYVisible(false)
    .setGridStrokeYStyle(emptyLine),
    )
     // Example 2, style AutoCursor ResultTable.
    ChartXY.setAutoCursor((autoCursor) => autoCursor
    .setResultTable((resultTable) => resultTable
    .setOrigin(UIOrigins.LeftTop)
    .setTextFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
    .setTextFont((font) => font
    .setSize(12)
    .setFamily('sans-serif')
    )
    .setBackground((background) => background
    .setFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 0) }))
    )
    )
    )
     // Example 3, style AutoCursor TickMarker X.
    ChartXY.setAutoCursor((autoCursor) => autoCursor
    .setTickMarkerX((tickMarker: UIPointableTextBox) => tickMarker
    .setTextFont((font) => font.setWeight('bold'))
    .setTextFillStyle(new SolidFill({ color: ColorRGBA(0, 255, 0) }))
    .setBackground((background) => background.setFillStyle(emptyFill).setStrokeStyle(emptyLine)),
    )
    )

    Returns

    Object itself for fluent interface.

    Parameters

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

      Callback function that receives reference to the charts AutoCursor.

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Disable/Enable AutoCursor during Axis Animations.

    Axis Animations are Axis Scale changes that are animated, such as Zooming and Scrolling done by using API (such as Axis.setInterval) or by using the mouse to click & drag on the Chart.

    Returns

    Chart itself for fluent interface.

    Parameters

    • autoCursorEnabled: boolean

      Boolean value to enable or disable AutoCursor during Axis Animations.

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set chart AutoCursor behavior, by selecting a preset option from AutoCursorModes.

    Possible values:

    • AutoCursorModes.snapToClosest (default) | AutoCursor snaps to closest data point from mouse location.
    • AutoCursorModes.onHover | AutoCursor is only shown when it is directly over a series. NOTE: Series mouse interactions must be enabled for this to work!
    • AutoCursorModes.disabled | AutoCursor is disabled
     // Example, disable AutoCursor
    ChartXY.setAutoCursorMode(AutoCursorModes.disabled)

    Related information:

    On series level, AutoCursor behavior can be configured individually for each series, and there are also more series specific options available. Here is LineSeries for example:

    • setCursorEnabled | configure whether cursor should pick on the series or not.
    • setCursorResultTableFormatter | configure formatting of result table contents, when this series is pointed.
    • setCursorInterpolationEnabled | configure whether cursor should interpolate the displayed data point between the two closest data points, or snap to the nearest real data point.
    • setCursorSolveBasis | configure basis of finding nearest data point for the series ('nearest-x', 'nearest', etc.).

    Returns

    Object itself for fluent interface.

    Parameters

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • 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 ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set mouse style when hovering over series background.

    Returns

    Object itself

    Parameters

    • mouseStyle: string = MouseStyles.Default

      Mouse-style preset name (see MouseStyles)

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set mouse style when fitting over series background.

    Returns

    Object itself

    Parameters

    • mouseStyle: string = MouseStyles.Default

      Mouse-style preset name (see MouseStyles)

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set is mouse-interaction enabled: Panning axes by dragging mouse on frame.

    Returns

    Object itself

    Parameters

    • enabled: boolean

      Boolean flag

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set is mouse-interaction enabled: Fitting axes by capturing rectangle on frame.

    Returns

    Object itself

    Parameters

    • enabled: boolean

      Boolean flag

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set is mouse-interaction enabled: Zooming axes by capturing rectangle on frame.

    Returns

    Object itself

    Parameters

    • enabled: boolean

      Boolean flag

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

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

    Returns

    Object itself

    Parameters

    • enabled: boolean

      Boolean flag

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set all mouse-interaction flags at once.

    Returns

    Object itself

    Parameters

    • enabled: boolean

      Are mouse-interactions enabled

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set mouse style when panning over series background.

    Returns

    Object itself

    Parameters

    • mouseStyle: string = MouseStyles.Move

      Mouse-style preset name (see MouseStyles)

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set mouse style when zooming over series background.

    Returns

    Object itself

    Parameters

    • mouseStyle: string = MouseStyles.ZoomIn

      Mouse-style preset name (see MouseStyles)

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • 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 ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • 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 ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • 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 ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set the state for all Series in the Chart to highlight on mouse hover.

    Returns

    Object itself for fluent interface.

    Parameters

    • state: boolean

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

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set text of Chart title.

    Returns

    Object itself for fluent interface.

    Parameters

    • title: string

      Chart title as a string.

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • 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 ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • 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 ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

  • Set position of ChartXY title.

     // Example usage
    ChartXY.setTitlePosition(ChartXYTitlePositionOptions.LeftTop)

    // Or
    ChartXY.setTitlePosition('left-top')

    For available options, see ChartXYTitlePosition

    To tweak title position, you may use setTitleMargin

    Parameters

    • pos: "right-top" | "left-top" | "right-bottom" | "left-bottom" | "center-top" | "center-bottom" | "series-center-top" | "series-right-top" | "series-left-top" | "series-center-bottom" | "series-right-bottom" | "series-left-bottom"

      Title position.

    Returns ChartXY<CursorPointMarkerType, CursorResultTableBackgroundType>

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

    Returns

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

    Parameters

    • Optional location: Point

      Location on screen or omit for cur mouse location

    Returns undefined | CursorPoint<Series2D<any>>

  • Method zooms axes by pixels.

    // Zoom the chart out.
    chart.zoom({x: 500, y: 500}, {x: 1, y: 1})

    Parameters

    • location: Point

      Origin location for zooming as viewport pixels

    • amount: Point

      Amount to zoom X/Y in pixels

    Returns void