Options
All
  • Public
  • Public/Protected
  • All
Menu

Class LineSeries

Series type for visualizing 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.

Creating LineSeries:

LineSeries are created with ChartXY.addLineSeries method.

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.

Frequently used methods:

LineSeries mouse interactions:

Contrary to other features, LineSeries mouse interactions are disabled by default since version 3.0.1.

If mouse interactions are required, you need to enable them with LineSeries.setMouseInteractions. With mouse interactions enabled, using a data pattern is heavily recommended, especially with large data amounts. Line Series mouse interactions function significantly faster with a data pattern.

To learn of LineSeries data patterns, refer to LineSeriesOptions.dataPattern.

Additionally, LineSeries mouse interactions do not work when the series is placed on a logarithmic axis.

These issues will be resolved in the immediate future (2021) until all interactions work as expected.

Index

Properties

Readonly axisX

axisX : Axis

Axis X

Readonly axisY

axisY : Axis

Axis Y

Readonly chart

chart : ChartXY

Readonly scale

scale : LinearScaleXY

Scale of the series

Methods

add

  • Append a single XY coordinate or list of XY coordinates into the series.

     // Example syntax
     LineSeries.add({ x: 0, y: 100 })
    
     LineSeries.add([
         { x: 0, y: 100 },
         { x: 10, y: 50 },
         { x: 20, y: 75 },
     ])
    

    For more methods of appending data into series, see:

    Data gaps

    When using LineSeries, AreaSeries or other series types which connect data points together, the connections between specific data points can be removed by adding gap data points.

    A gap data point is specified by using Number.NaN as either X or Y coordinate.

     // Example, data gap syntax.
     LineSeries.add([
         { x: 0, y: 10 },
         { x: 1, y: 12 },
         { x: 2, y: Number.NaN },
         { x: 3, y: 15 },
         { x: 4, y: 20 }
     ])
    

    Additional extra data point properties

    There is also a set of extra properties that can be supplied for each data point:

     // Example, data point with `value` property
     LineSeries.add({
         x: 0,
         y: 0,
         value: 62.5
     })
    

    Parameters

    • points: Point | Point[]

      Single XY coordinate or list of coordinates.

    Returns this

    Object itself for fluent interface.

addArrayX

  • addArrayX(arrayX: number[] | TypedArray, step: number, start?: undefined | number): this
  • Append new data points into the series by only supplying X coordinates.

     // Example syntax, number array
     LineSeries.addArrayX([ 5, 1, 2, 0 ])
    

    This method supports binary data input by using Typed arrays. If your data comes in any binary format, then using the typed array syntax is recommended for best performance.

     // Example syntax, typed array (Float32)
     const float32Array = new Float32Array(4)
     float32Array[0] = 5
     float32Array[1] = 1
     float32Array[2] = 2
     float32Array[3] = 0
     LineSeries.addArrayX(float32Array)
    

    Each X coordinate will be paired with an automatically generated Y coordinate.

    By default, this continues from the last data point in the series. However, the behavior of assigning Y coordinates can be controlled with the optional step and start parameters.

    For more methods of appending data into series, see:

    • add | Append XY coordinates.
    • addArrayY | Append only Y coordinates.
    • addArraysXY | Append X and Y coordinates in separate arrays.

    Data gaps

    When using LineSeries, AreaSeries or other series types which connect data points together, the connections between specific data points can be removed by adding gap data points.

    A gap data point is specified by using Number.NaN.

     // Example, data gap syntax.
     LineSeries.addArrayX([ 10, 12, Number.NaN, 15, 20 ])
    

    Parameters

    • arrayX: number[] | TypedArray

      Array of X-values.

    • step: number

      Optional step between each Y coordinate. Defaults to 1.

    • start: undefined | number

      Optional value for first generated Y-value. If undefined, will continue after last point's Y value in series, or 0 if there are no points in series.

    Returns this

    Object itself for fluent interface.

addArrayY

  • addArrayY(arrayY: number[] | TypedArray, step: number, start: number): this
  • Append new data points into the series by only supplying Y coordinates.

     // Example syntax, number array
     LineSeries.addArrayY([ 5, 1, 2, 0 ])
    

    This method supports binary data input by using Typed arrays. If your data comes in any binary format, then using the typed array syntax is recommended for best performance.

     // Example syntax, typed array (Float32)
     const float32Array = new Float32Array(4)
     float32Array[0] = 5
     float32Array[1] = 1
     float32Array[2] = 2
     float32Array[3] = 0
     LineSeries.addArrayY(float32Array)
    

    Each Y coordinate will be paired with an automatically generated X coordinate.

    By default, this continues from the last data point in the series. However, the behavior of assigning X coordinates can be controlled with the optional step and start parameters.

    For more methods of appending data into series, see:

    • add | Append XY coordinates.
    • addArrayX | Append only X coordinates.
    • addArraysXY | Append X and Y coordinates in separate arrays.

    Data gaps

    When using LineSeries, AreaSeries or other series types which connect data points together, the connections between specific data points can be removed by adding gap data points.

    A gap data point is specified by using Number.NaN.

     // Example, data gap syntax.
     LineSeries.addArrayY([ 10, 12, Number.NaN, 15, 20 ])
    

    Parameters

    • arrayY: number[] | TypedArray

      Array of Y-values.

    • step: number

      Optional step between each X coordinate. Defaults to 1.

    • start: number

      Optional value for first generated X-value. If undefined, will continue after last point's X value in series, or 0 if there are no points in series.

    Returns this

    Object itself for fluent interface.

addArraysXY

  • Append new data points into the series by supplying X and Y coordinates in two separated arrays.

     // Example syntax, number array
     LineSeries.addArraysXY([0, 1, 2, 3], [ 5, 1, 2, 0 ])
    

    This method supports binary data input by using Typed arrays. If your data comes in any binary format, then using the typed array syntax is recommended for best performance.

     // Example syntax, typed array (Float32)
     const float32Array = new Float32Array(4)
     float32Array[0] = 5
     float32Array[1] = 1
     float32Array[2] = 2
     float32Array[3] = 0
     LineSeries.addArraysXY([0, 1, 2, 3], float32Array)
    

    For more methods of appending data into series, see:

    • add | Append XY coordinates.
    • addArrayX | Append only X coordinates.
    • addArrayY | Append only Y coordinates.

    Data gaps

    When using LineSeries, AreaSeries or other series types which connect data points together, the connections between specific data points can be removed by adding gap data points.

    A gap data point is specified by using Number.NaN.

     // Example, data gap syntax.
     LineSeries.addArraysXY(
         [ 0, 1, 2, 3, 4 ],
         [ 10, 12, Number.NaN, 15, 20 ]
     )
    

    Parameters

    • arrayX: number[] | TypedArray

      Array of X-values.

    • arrayY: number[] | TypedArray

      Array of Y-values. Length should be equal to length of arrayX.

    Returns this

    Object itself for fluent interface.

addMarker

  • Add Marker to the Series.

    Type parameters

    Parameters

    • cursorBuilder: StaticCursorXYBuilder<PointMarkerType, ResultTableBackgroundType>

      StaticCursorBuilderXY object for customized look of marker. MarkerBuilders.XY can be used to build a custom one from scratch.

    Returns SeriesMarkerXY<PointMarkerType, ResultTableBackgroundType>

    SeriesMarkerXY

attach

  • Attach object to an legendBox entry

    Parameters

    • entry: LegendBoxEntry

      Object which has to be attached

    • disposeOnClick: boolean

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

    Returns this

    Series 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
  • Remove everything related to the object from all collections associated with rendering cycle and allows the object to be collected by GC

    Returns this

    Object itself for fluent interface

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.

getBoundaries

  • getBoundaries(): Interval<Point>
  • Returns Interval<Point>

getCursorEnabled

  • getCursorEnabled(): boolean
  • Returns boolean

    Whether Cursor is enabled or not

getCursorInterpolationEnabled

  • getCursorInterpolationEnabled(): boolean
  • Get if cursor interpolates solved data-points along series by default.

    Cursor interpolation is only supported if the LineSeries follows a progressive data-pattern, refer to ChartXY.addLineSeries for more information on data-patterns.

    Returns boolean

    Boolean flag

getCursorResultTableFormatter

  • Get ResultTable Formatter.

    Returns SeriesXYFormatter

    Function which builds ResultTable content for SeriesXY.

getCursorSolveBasis

  • getCursorSolveBasis(): "nearest" | "nearest-x" | "nearest-y"
  • Get basis of solving data point nearest to a given location from this series.

    Default configuration is 'nearest'.

    Returns "nearest" | "nearest-x" | "nearest-y"

    String describing the desired solve behavior.

getDataCleaningThreshold

  • getDataCleaningThreshold(): number | undefined
  • Get progressive data cleaning threshold.

    This feature allows configuring automatic data cleaning in infinitely scrolling applications.

    This feature is only intended for progressive data patterns! To learn of LineSeries data patterns, refer to LineSeriesOptions.dataPattern.

    The data cleaning threshold is a position on a single Axis (either X or Y) of the series. All data that exists behind this threshold, can be cleaned at any convenient time by the rendering engine, releasing memory for more data.

    The behavior of data cleaning threshold is based on the pattern argument supplied to LineSeriesOptions.dataPattern:

    • 'ProgressiveX' -> data cleaning threshold is a position on X Axis. All data points whose X coordinate is less than the threshold, can be cleaned.
    • 'RegressiveX' -> data cleaning threshold is a position on X Axis. All data points whose X coordinate is more than the threshold, can be cleaned.
    • 'ProgressiveY' -> data cleaning threshold is a position on Y Axis. All data points whose Y coordinate is less than the threshold, can be cleaned.
    • 'RegressiveY' -> data cleaning threshold is a position on Y Axis. All data points whose Y coordinate is more than the threshold, can be cleaned.
    deprecated

    Will be removed in v4.0 in favour of setDataCleaning.

    Returns number | undefined

    Data cleaning threshold value or undefined.

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

getLastPoint

  • getLastPoint(): Point | undefined
  • Returns Point | undefined

    Copy of last point added to the Series or undefined if it doesn't exist.

getMaxPointCount

  • getMaxPointCount(): number | undefined
  • Get amount of points that series should keep around at all times (data-cleaning won't touch them).

    deprecated

    Will be removed in v4.0.

    Returns number | undefined

    Number of points, or undefined if data-cleaning is disabled

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
  • Get amount of points that series currently has.

    Returns number

    Number of points

getStrokeStyle

  • Get stroke style of Series.

    Returns SolidLine

    SolidLine object

getStrokeStyleHighlight

  • Get stroke style of Series when it is highlighted. Highlighting is activated by placing mouse on top / touching Series (if mouse-interactions are not disabled), or by using setHighlighted() method.

    Returns SolidLine

    SolidLine object

getXMax

  • getXMax(): number
  • Returns number

    Max X value of the series or 0 if series has no data.

getXMin

  • getXMin(): number
  • Returns number

    Min X value of the series or 0 if series has no data.

getYMax

  • getYMax(): number
  • Returns number

    Max Y value of the series or 0 if series has no data.

getYMin

  • getYMin(): number
  • Returns number

    Min Y value of the series or 0 if series has no data.

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.

offHover

  • offHover(token: Token): boolean
  • Remove event listener from Series Hover 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

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.

onHover

  • onHover(clbk: function): Token
  • Add event listener to Series Hover Event. Hover event is a custom mouse-event designed for Series that is the main link between Cursors and Series.

    Parameters

    • clbk: function

      Callback function that is called whenever mouse enters / moves or leaves the Series

        • Parameters

          Returns void

    Returns Token

    Token of the event listener

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

    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.

setCursorEnabled

  • setCursorEnabled(state: boolean): this
  • Configure whether cursors should pick on this particular series or not.

     // Example, prevent chart auto cursor from snapping to a series.
     LineSeries.setCursorEnabled(false)
    

    Related API:

    • setCursorResultTableFormatter | configure formatting of result table contents, when this series is pointed.
    • setCursorSolveBasis | configure basis of finding nearest data point for the series ('nearest-x', 'nearest', etc.). This method is not available for all series types (more support will be added in near future).
    • setCursorInterpolationEnabled | configure whether cursor should interpolate the displayed data point between the two closest data points, or snap to the nearest real data point. This method is not available for all series types.
    • ChartXY.setAutoCursorMode | configure behavior when auto cursor is visible.

    Parameters

    • state: boolean

    Returns this

setCursorInterpolationEnabled

  • setCursorInterpolationEnabled(state: boolean): this
  • Set if cursor interpolates solved data-points along series by default.

     // Example, disable default interpolation of progressiveX line series.
     const series = ChartXY.addLineSeries({
         dataPattern: {
             pattern: 'ProgressiveX'
         }
     })
         .setCursorInterpolationEnabled(false)
    

    Cursor interpolation is only supported with a collection of configuration combinations:

    • Freeform data + cursor solve basis = 'nearest'
    • ProgressiveX data + cursor solve basis = 'nearestX'
    • ProgressiveY data + cursor solve basis = 'nearestY'

    With any other combination, or if cursor intepolation is disabled, the closest actual data point will be selected.

    Related information:

    Related API:

    Parameters

    • state: boolean

      Boolean flag

    Returns this

    Object itself for fluent interface

setCursorResultTableFormatter

  • Configure formatting of Cursor ResultTable when pointing at this series.

     // Example usage
     LineSeries.setCursorResultTableFormatter((tableBuilder, series, x, y, dataPoint) => {
         return tableBuilder
             .addRow(`Pointing at`, '', series.getName())
             .addRow(`X:`, '', dataPoint.x.toFixed(1))
             .addRow(`Y:`, '', dataPoint.y.toFixed(1))
     })
    

    The general syntax of configuring ResultTable formatting is shared between all series types; You specify a callback function, which receives a TableContentBuilder. The contents of the table are then set using methods of the table builder:

     // Using TableContentBuilder.
     LineSeries.setCursorResultTableFormatter((tableBuilder, series, x, y) => {
         // addRow adds a list of strings to a new row in the table. Empty strings ('') will allocate any extra horizontal space within the row.
         tableBuilder
             .addRow('Item 0:', '', 'Value 0')
             .addRow('Item 1:', '', 'Value 1')
             .addRow('Long row that highlights the idea of empty strings')
    
         // After configuration, the table builder must be returned!
         return tableBuilder
     })
    

    Default Axis formatting can be referenced by using Axis.formatValue method.

    The additional values that are supplied to the callback function, vary per series, refer to the series documentation of setCursorResultTableFormatter to learn the exact available information. For example, LineSeries receives three extra parameters:

    1. series | reference to the series itself.
    2. x | pointed data point X coordinate.
    3. y | pointed data point Y coordinate.
    4. dataPoint | reference to the pointed data point as supplied by user.

    Related API:

    Parameters

    Returns this

    Object itself

setCursorSolveBasis

  • setCursorSolveBasis(basis: "nearest" | "nearest-x" | "nearest-y"): this
  • Set basis of solving data point nearest to a given location from this series.

    Default configuration is 'nearest-x'.

     // Example, configure series cursor to snap to closest data point along both X and Y dimensions.
     LineSeries.setCursorSolveBasis('nearest')
    

    Related API:

    Parameters

    • basis: "nearest" | "nearest-x" | "nearest-y"

      String describing the desired solve behavior.

    Returns this

setDataCleaning

  • setDataCleaning(arg: undefined): this
  • setDataCleaning(arg: object): this
  • Disable automatic data cleaning.

     // Example syntax, disable data cleaning.
     series.setDataCleaning(undefined)
    

    Parameters

    • arg: undefined

      Data cleaning configuration.

    Returns this

    Object itself for fluent interface.

  • Enable automatic data cleaning by minDataPointCount configuration.

    Specifying minDataPointCount enables lazy cleaning of data that is outside view as long as the remaining data amount doesn't go below the configured threshold.

     // Example syntax for specifying minDataPointCount
     series.setDataCleaning({ minDataPointCount: 10000 })
    

    Usage of minDataPointCount is recommended in most common applications that require automatic data cleaning. The actual value is often not very particular, just setting it above 0 to enable it is usually enough (lazy data cleaning of out of view data).

     // Example, enable lazy data cleaning of out of view data.
     series.setDataCleaning({ minDataPointCount: 1 })
    

    Parameters

    • arg: object

      Data cleaning configuration.

      • minDataPointCount: number | undefined

    Returns this

    Object itself for fluent interface.

setDataCleaningThreshold

  • setDataCleaningThreshold(dataCleaningThreshold: number | undefined): this
  • Set progressive data cleaning threshold.

    This feature allows configuring automatic data cleaning in infinitely scrolling applications.

    This feature is only intended for progressive data patterns! To learn of LineSeries data patterns, refer to LineSeriesOptions.dataPattern.

    The data cleaning threshold is a position on a single Axis (either X or Y) of the series. All data that exists behind this threshold, can be cleaned at any convenient time by the rendering engine, releasing memory for more data.

    The behavior of data cleaning threshold is based on the pattern argument supplied to LineSeriesOptions.dataPattern:

    • 'ProgressiveX' -> data cleaning threshold is a position on X Axis. All data points whose X coordinate is less than the threshold, can be cleaned.
    • 'RegressiveX' -> data cleaning threshold is a position on X Axis. All data points whose X coordinate is more than the threshold, can be cleaned.
    • 'ProgressiveY' -> data cleaning threshold is a position on Y Axis. All data points whose Y coordinate is less than the threshold, can be cleaned.
    • 'RegressiveY' -> data cleaning threshold is a position on Y Axis. All data points whose Y coordinate is more than the threshold, can be cleaned.

    Example usage:

    • Infinitely streaming Line Chart.
     const series = chart.addLineSeries({
         dataPattern: {
             // Specify progressive X data.
             pattern: 'ProgressiveX'
         }
     })
    
     // Setup progressive scrolling X Axis.
     chart.getDefaultAxisX().setScrollStrategy(AxisScrollStrategies.progressive).setInterval(-1000, 0)
    
     // Setup infinite data stream.
     let x = 0
     setInterval(() => {
         series.add({ x, y: Math.random() * 100 })
         x += 1
         // Move data cleaning threshold dynamically behind series data to allow data cleaning of old data.
         const dcThreshold = series.getXMax() - 1000
         series.setDataCleaningThreshold(dcThreshold)
     }, 1000 / 60)
    
    deprecated

    Will be removed in v4.0 in favour of setDataCleaning.

    Parameters

    • dataCleaningThreshold: number | undefined

      Data cleaning threshold value or undefined to disable data cleaning based on threshold.

    Returns this

    Object itself.

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

setMaxPointCount

  • setMaxPointCount(maxPointCount?: undefined | number): this
  • Configure automatic data cleaning by maxPointCount. This allows the cleaning of all excess data points that are outside view, so that after cleaning at least maxPointCount data points are retained. Essentially it configures the head length of a series.

     // Example, progressive X line series with automatic data cleaning.
     const series = ChartXY.addLineSeries({
         dataPattern: {
             pattern: 'ProgressiveX'
         }
     })
         // Keep at least 1000 data points in series, otherwise excess out of view data can be cleaned for more memory.
         .setMaxPointCount(1000)
    
    // Setup automatically scrolling X Axis.
    chart.getDefaultAxisX().setScrollStrategy(AxisScrollStrategies.progressive).setInterval(0, 1000)
    
     // Continously stream data into series.
     let x = 0
     setInterval(() => {
         const newDataPoints = []
         for (let i = 0; i <= 10; i += 1) {
             newDataPoints.push({ x: x + i, y: Math.random() * 100 })
         }
         x += newDataPoints.length
         series.add(newDataPoints)
     }, 1000 / 60)
    

    For progressive LineSeries, there is another way to enable automatic data cleaning: LineSeries.setDataCleaningThreshold.

    Enabling automatic data cleaning is crucial in applications that run for a long time, or even forever, because it allows clearing memory for allocating new data points.

    deprecated

    Will be removed in v4.0 in favour of setDataCleaning.

    Parameters

    • maxPointCount: undefined | number

      Configuration for automatic data cleaning by maxPointCount. If undefined or 0 is passed, automatic data cleaning by maxPointCount will be disabled.

    Returns this

    Object itself for fluent interface.

setMouseInteractions

  • setMouseInteractions(state: boolean): this
  • Set mouse interactions enabled or disabled. Disabling mouse-interactions will naturally prevent mouse-driven highlighting from ever happening.

    Line series mouse interactions are disabled by default.

    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

setStrokeStyle

  • Set stroke style of Series.

     // Example syntax, specify LineStyle
     LineSeries.setStrokeStyle(new SolidLine({
         thickness: 2,
         fillStyle: new SolidFill({ color: ColorHEX('#F00') })
     }))
    
     // Example syntax, change active LineStyle
     LineSeries.setStrokeStyle((stroke) => stroke.setThickness(5))
    

    Use -1 thickness to enable primitive line rendering. Primitive line rendering can have slightly better rendering performance than line with 1 thickness but the quality of line is not as good.

     LineSeries.setStrokeStyle((solidLine) => solidLine.setThickness(-1))
    

    Supported fill styles:

    SolidFill:

    Solid color for entire line series.

     // Example, solid colored line.
     LineSeries.setStrokeStyle(new SolidLine({
         thickness: 2,
         fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) })
     }))
    

    To learn more about available Color factories, see ColorRGBA

    PalettedFill:

    Line series supports following look-up modes: x, y and value.

    lookUpProperty: 'x' | 'y':

    Color line stroke dynamically based on x or y coordinate.

     // Example, dynamic color by Y coordinates
     LineSeries.setStrokeStyle(new SolidLine({
         thickness: 2,
         fillStyle: new PalettedFill({
             lookUpProperty: 'y',
             lut: new LUT({
                 interpolate: true,
                 steps: [
                     { value: 0, color: ColorRGBA(255, 0, 0) },
                     { value: 100, color: ColorRGBA(0, 255, 0) },
                 ]
             })
         })
     }))
    

    To learn more about Color lookup tables, see LUT.

    lookUpProperty: 'value':

    Color line stroke dynamically based on separately supplied value data set.

    values are specified when adding data points with add method.

     // Example, dynamic color by Value data set
     LineSeries
         .setStrokeStyle(new SolidLine({
              thickness: 2,
              fillStyle: new PalettedFill({
                  lookUpProperty: 'value',
                  lut: new LUT({
                      interpolate: true,
                      steps: [
                          { value: 0, color: ColorRGBA(255, 0, 0) },
                          { value: 100, color: ColorRGBA(0, 255, 0) },
                      ]
                  })
              })
         }))
         .add([ {x: 0, y: 0, value: 0}, {x: 1, y: 10, value: 100} ])
    

    Data point value properties have to be explicitly enabled before they can be used, see LineSeriesOptions.individualLookupValuesEnabled for more details.

    To learn more about Color lookup tables, see LUT.

    LinearGradientFill:

    Color line stroke with a linear configurable gradient palette.

     // Example, linear gradient line color
     LineSeries.setStrokeStyle(new SolidLine({
         thickness: 2,
         fillStyle: new LinearGradientFill()
     }))
    

    To learn more about linear gradient configurations, see LinearGradientFill.

    RadialGradientFill:

    Color line stroke with a radial configurable gradient palette.

     // Example, radial gradient line color
     LineSeries.setStrokeStyle(new SolidLine({
         thickness: 2,
         fillStyle: new RadialGradientFill()
     }))
    

    To learn more about radial gradient configurations, see RadialGradientFill.

    Parameters

    Returns this

    Object itself for fluent interface.

setStrokeStyleHighlight

  • Set stroke style of Series when it is highlighted. Highlighting is activated by placing mouse on top / touching Series (if mouse-interactions are not disabled), or by using setHighlighted() method.

    Example usage:

    // Specified LineStyle
    LineSeries.setStrokeStyleHighlight(new SolidLine({ thickness: 2, fillStyle: new SolidFill({ color: ColorHEX('#F00') }) }))
    // Changed thickness
    LineSeries.setStrokeStyleHighlight((solidLine) => solidLine.setThickness(5))
    // Hidden must be done with transparentLine, emptyLine is not supported
    LineSeries.setStrokeStyleHighlight(transparentLine)
    // Automatic
    LineSeries.setStrokeStyleHighlight(undefined)
    

    Parameters

    • value: SolidLine | ImmutableMutator<SolidLine> | undefined

      Either a SolidLine object or a function, which will be used to modify current value or undefined for automatic value based on normal style.

    Returns this

    Chart itself

solveNearestFromScreen

  • solveNearestFromScreen(location: Point, interpolate: boolean): undefined | CursorPoint
  • Solves the nearest datapoint to a given coordinate on screen.

    Parameters

    • location: Point

      Location on screen

    • interpolate: boolean

    Returns undefined | CursorPoint

    Undefined or data-structure for positioning of cursors

solveNearestFromSegment

  • solveNearestFromSegment(location: Point, segment: LineSet, interpolate: boolean): undefined | CursorPoint
  • Solves the nearest datapoint to a given coordinate on a screen from a specific segment.

    Parameters

    • location: Point

      Location on screen

    • segment: LineSet

      Segment to solve from

    • interpolate: boolean

    Returns undefined | CursorPoint

    Undefined or data-structure for positioning of cursors