Skip to main content
Version: 6.1.2

Step

The Step series is a point-line series with an automatic stepping interpolation resulting in only sharp turns of curve. This is simply a differently styled instance of PointLineAreaSeries.

Chart with step series Chart with step series

// Creation of a step series
const stepSeries = chart.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })
    .setAreaFillStyle(emptyFill)
    .setCurvePreprocessing({ type: 'step', step: 'middle' })

There are 3 different modes available: 'before', 'middle', 'after'.

For "points" oriented guides, please refer to Scatter](/6.1.2/features/xy/scatter) section.

Otherwise, the step series functions exactly same as a Line series](/6.1.2/features/xy/line).

Also worth pointing out that it can also produce a Stepped Area chart, simply by not disabling the area fill style as in above snippet.