Skip to main content
Version: 7.1.2

Using the beta features

We at LightningChart Ltd. are currently in the process of updating our most important features - the core XY data visualization functionalities. The current status of this project is public beta. Starting with LightningChart JS v5.1.0, the latest previews of the next XY feature iteration are available with the library.

Currently there are beta features that act as direct replacements for:

  • LineSeries
  • PointSeries
  • PointLineSeries
  • SplineSeries
  • StepSeries
  • AreaSeries

These are all encapsulated into just 1 series type: PointLineAreaSeries. This is likely to be only a temporary concept - when the beta stage ends, it is more likely that the old series addition methods etc. will be kept around and just use the new technology under the hood.

As long as you have LightningChart JS v5.1.x installed, you can use the new beta features like so:

const series = ChartXY.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })

As mentioned before, the PointLineAreaSeries can serve many different data visualization use cases that normally are handled by different series types. By default, this series will display Lines, Area filling and Point markers at data points. To achieve different data visualization types, you can either remove components from it:

// Only Line + Points
const lineSeries = ChartXY.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
    .setAreaFillStyle(emptyFill)
// Only Points with scattered data instead of progressive
const scatterSeries = ChartXY.addPointLineAreaSeries({
    dataPattern: null
})
    .setAreaFillStyle(emptyFill)
    .setStrokeStyle(emptyLine)

...or you can add preprocessing options to replace old use cases of StepSeries and SplineSeries:

const stepSeries = ChartXY.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
    .setAreaFillStyle(emptyFill)
    .setCurvePreprocessing({ type: 'step', step: 'middle' })
const splineSeries = ChartXY.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
    .setAreaFillStyle(emptyFill)
    .setCurvePreprocessing({ type: 'spline' })

Unlike before, you also have the option of Spline/Step Area Series by simply removing the setAreaFillStyle call above.

Note that the PointLineAreaSeries has a new, different API for inputting data. See these sections to learn more: