JavaScript Step Series

Also known as a Step Graph or Step Chart

This example shows the basic usage of a step series with different preprocessing modes. Similarly to line series, it is drawn on a Cartesian coordinate system and represents the relationship between two variables. However, it is used to visualize the changing variables that have irregular fluctuation forming a step-like progression.

The data that changes at irregular intervals remains constant between the changes. The vertical risers of a chart denote changes in the data and their magnitude, the horizontal - the constancy of the data within the interval.

Creation of a step series is equal to any basic line series, with the exception of an additional optional parameter, which specifies the 'step option' of the series.

const stepSeries = chart.addStepSeries({ mode: stepOption })

There is no need in data preparation, step chart will be generated automatically from the provided curve based on selected step mode.

Step OptionsDescription
beforeThe magnitude changes before the next interval start.
middleThe magnitude changes at the midpoint of the interval.
afterThe magnitude changes after the previous interval end.

The series accepts points in format { x: number, y: number: color: Color } with specified IndividualPointFill to enable individual point coloring or { x: number, y: number } for other fill styles. Any number of points can be added with a single call similarly to line series with point markers.