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 Options | Description |
|---|---|
| before | The magnitude changes before the next interval start. |
| middle | The magnitude changes at the midpoint of the interval. |
| after | The 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.