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

Hierarchy

Implements

Properties

_isCursorEnabled: boolean = true

Active state of Cursor

axisX: Axis
axisY: Axis
scale: LinearScaleXY

Scale of the series

Methods

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

    Returns

    Object itself for fluent interface.

    Parameters

    • points: Point | Point[]

      Single XY coordinate or list of coordinates.

    Returns LineSeries

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

    Returns

    Object itself for fluent interface.

    Parameters

    • arrayX: number[] | TypedArray

      Array of X-values.

    • step: number = 1

      Optional step between each Y coordinate. Defaults to 1.

    • Optional start: 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 LineSeries

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

    Returns

    Object itself for fluent interface.

    Parameters

    • arrayY: number[] | TypedArray

      Array of Y-values.

    • step: number = 1

      Optional step between each X coordinate. Defaults to 1.

    • start: number = 0

      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 LineSeries

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

    Returns

    Object itself for fluent interface.

    Parameters

    • arrayX: number[] | TypedArray

      Array of X-values.

    • arrayY: number[] | TypedArray

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

    Returns LineSeries

  • Add Marker to the Series.

    Returns

    SeriesMarkerXY

    Type Parameters

    • PointMarkerType extends PointMarker<PointMarkerType>

    • ResultTableBackgroundType extends UIBackground<ResultTableBackgroundType>

    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>

  • Clear all previously pushed data points from the series.

     // Example usage
    LineSeries.clear()

    Returns

    Object itself for fluent interface.

    Returns LineSeries

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

  • Get component highlight animations enabled or not.

    Returns

    Animation enabled?

    Returns 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

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

    Returns 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 addLineSeries for more information on data-patterns.

    Returns

    Boolean flag

    Returns boolean

  • Get basis of solving data point nearest to a given location from this series.

    Default configuration is 'nearest'.

    Returns

    String describing the desired solve behavior.

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

  • 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 state of component highlighting.

    In case highlight animations are enabled, this method returns the unanimated highlight value.

    Returns

    Number between 0 and 1, where 1 is fully highlighted.

    Returns number

  • Get boolean flag for whether object should highlight on mouse hover

    Returns

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

    Returns boolean

  • Get boolean flag for whether object is currently under mouse or not

    Returns

    Boolean for is object under mouse currently

    Returns boolean

  • Returns

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

    Returns undefined | Point

  • Get mouse interactions enabled or disabled. Disabled mouse-interactions will naturally prevent mouse-driven highlighting from ever happening.

    Returns

    Mouse interactions state

    Returns boolean

  • Get the name of the Component.

    Returns

    The name of the Component.

    Returns string

  • Get amount of points that series currently has.

    Returns

    Number of points

    Returns number

  • Get stroke style of Series.

    Returns

    SolidLine object

    Returns LineStyle

  • Get element visibility.

    Returns

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

    Returns boolean

  • Returns

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

    Returns number

  • Returns

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

    Returns number

  • Returns

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

    Returns number

  • Returns

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

    Returns number

  • 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

  • Unsubscribe from Highlight object event. This is called whenever an object is highlighted

    Returns

    True if the unsubscription was successful.

    Parameters

    • token: Token

      Token that was received when subscribing to the event.

    Returns boolean

  • Remove event listener from Mouse Click 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 Mouse Double Click 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 Mouse Down 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 Mouse Drag 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 Mouse Drag Start 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 Mouse Drag Stop 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 Mouse Enter 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 Mouse Leave 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 Mouse Move 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 Mouse Up 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 Mouse Wheel 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 Touch End 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 Touch Move 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 Touch Start 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 visibleStateChanged

    Parameters

    • token: Token

    Returns boolean

  • Subscribe onDispose event. This event is triggered whenever the ChartComponent is disposed.

     // Example usage

    lineSeries.onDispose(() => {
    console.log('lineSeries was disposed')
    })

    lineSeries.dispose()

    Returns

    Token of subscription

    Parameters

    Returns Token

  • Subscribe to highlight object event. This is called whenever an object is highlighted.

    Returns

    Token that can be used to unsubscribe from the event.

    Parameters

    • handler: ((isHighlighted: number | boolean) => void)

      Function that is called when event is triggered.

        • (isHighlighted: number | boolean): void
        • Parameters

          • isHighlighted: number | boolean

          Returns void

    Returns Token

  • Register new event listener to visibleStateChanged event.

    Parameters

    • listener: VisibleStateChangedHandler<LineSeries>

      Event listener for visibleStateChanged

    Returns Token

  • Set component highlight animations enabled or not. For most components this is enabled by default.

     // Example usage, disable highlight animations.
    component.setAnimationHighlight(false)

    Returns

    Object itself

    Parameters

    • enabled: boolean

      Animation enabled?

    Returns LineSeries

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

    Returns

    Object itself for fluent interface.

    Parameters

    • enabled: boolean

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

    Returns LineSeries

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

    Parameters

    • state: boolean

    Returns LineSeries

  • 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 interpolation is disabled, the closest actual data point will be selected.

    Related information:

    Related API:

    Returns

    Object itself for fluent interface

    Parameters

    • state: boolean

      Boolean flag

    Returns LineSeries

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

    Returns

    Object itself

    Parameters

    Returns LineSeries

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

  • Disable automatic data cleaning.

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

    Returns

    Object itself for fluent interface.

    Parameters

    • arg: undefined

      Data cleaning configuration.

    Returns LineSeries

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

    Returns

    Object itself for fluent interface.

    Parameters

    • arg: {
          minDataPointCount: undefined | number;
      }

      Data cleaning configuration.

      • minDataPointCount: undefined | number

    Returns LineSeries

  • 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 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 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.setDataCleaning({progressiveDataCleaningThreshold: dcThreshold})
    }, 1000 / 60)

    Returns

    Object itself.

    Parameters

    • arg: {
          progressiveDataCleaningThreshold: undefined | number;
      }
      • progressiveDataCleaningThreshold: undefined | number

    Returns LineSeries

  • Configure draw order of the series.

    The drawing order of series inside same chart can be configured by configuring their seriesDrawOrderIndex. This is a simple number that indicates which series is drawn first, and which last.

    The values can be any JS number, even a decimal. Higher number results in series being drawn closer to the top.

    By default, each series is assigned a running counter starting from 0 and increasing by 1 for each series.

        // Example, create 2 series and configure them to be drawn in reverse order.
    const series1 = ChartXY.addLineSeries()
    .setDrawOrder({ seriesDrawOrderIndex: 1 })
    const series2 = ChartXY.addLineSeries()
    .setDrawOrder({ seriesDrawOrderIndex: 0 })
        // Example, ensure a series is drawn above other series.
    SeriesXY.setDrawOrder({ seriesDrawOrderIndex: 1000 })

    Returns

    Object itself.

    Parameters

    • arg: {
          seriesDrawOrderIndex: number;
      }

      Object with seriesDrawOrderIndex property.

      • seriesDrawOrderIndex: number

    Returns LineSeries

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

  • Set state of component highlighting.

     // Example usage

    component.setHighlight(true)

    component.setHighlight(0.5)

    If highlight animations are enabled (which is true by default), the transition will be animated. As long as the component is highlighted, the active highlight intensity will be animated continuously between 0 and the configured value. Highlight animations can be disabled with setAnimationHighlight

    Returns

    Object itself

    Parameters

    • highlight: number | boolean

      Boolean or number between 0 and 1, where 1 is fully highlighted.

    Returns LineSeries

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

    Returns

    Object itself for fluent interface.

    Parameters

    • state: boolean

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

    Returns LineSeries

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

    Returns

    Object itself for fluent interface

    Parameters

    • state: boolean

      Specifies state of mouse interactions

    Returns LineSeries

  • Sets the name of the Component updating attached LegendBox entries

    Returns

    Object itself

    Parameters

    • name: string

      Name of the Component

    Returns LineSeries

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

    Returns

    Object itself for fluent interface.

    Parameters

    Returns LineSeries

  • Set element visibility.

    Returns

    Object itself.

    Parameters

    • state: boolean

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

    Returns LineSeries