Range Step Area Chart


A range step area chart is a range area chart in which points are connected by horizontal and vertical line segments, looking like steps of a staircase. Like in the regular range area chart, the area between two lines that represent low and high Y-values is filled with color or a pattern.

Step charts are used when it is necessary to highlight the irregularity of changes: for example, when changes in tax rates or interest rates are visualized. They show periods with no change and emphasize the exact time of each change (the range version also emphasizing the difference between high and low values).

The Range Step Area and Range Area chart types share almost all the settings, so this article explains just how to create a basic Range Step Area chart and configure its only special setting - step direction. To learn about other settings, read the Range Area Chart article. You can also see the table below to get a brief overview of the Range Step Area chart's characteristics:

ModulesCore + Basic Cartesian / Base
Data Fieldsx, value
Multiple SeriesYES
VerticalVertical Range Step Area
Error BarsN/A
StockStock Range Step Area
Spline Area
Step Area
Range Area
Range Spline Area
Chartopedia: Range Step Area Chart
General Settings


The Range Step Area chart requires adding the Core and Basic Cartesian modules:

<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-cartesian.min.js"></script>

Alternatively, you can use the Base module, which includes, among other things, the two modules mentioned above:

<script src="https://cdn.anychart.com/releases/8.12.1/js/anychart-base.min.js"></script>

Learn more: Modules.

Quick Start

To create a Range Step Area series, use the rangeStepArea() method (before, of course, you should create a chart by using anychart.area() or any other cartesian chart constructor).

Since range area charts plot two Y-values per data point, you need to specify two values for each category by using the low and high parameters.

// create data
var data = [
  {x: "1995", low: 0.10, high: 0.15},
  {x: "1996", low: 0.10, high: 0.15},
  {x: "1997", low: 0.12, high: 0.17},
  {x: "1998", low: 0.13, high: 0.20},
  {x: "1999", low: 0.15, high: 0.20},
  {x: "2000", low: 0.15, high: 0.22},
  {x: "2001", low: 0.15, high: 0.22},
  {x: "2002", low: 0.19, high: 0.23},
  {x: "2003", low: 0.20, high: 0.23}

// create a chart
chart = anychart.area();

// create a range step area series and set the data
var series = chart.rangeStepArea(data);

// set step direction to the forward mode

// set the container id

// initiate drawing the chart



The Range Step Area chart is a modification of the Range Area chart, so these two types share almost all the settings. You can find more settings in this article: Range Area Chart.

Also, in AnyChart there are many settings that are configured in the same way for all chart types, including the Range Step Area chart (for example, legend and interactivity settings): General Settings.

In addition, see the full list of methods available for the Range Step Area series: anychart.core.cartesian.series.RangeStepArea.

Special Settings

Step Direction

The Range Step Area chart is formed by horizontal line segments of the same width as the category, connected with each other by vertical segments. To set the exact way these segments are placed, use this method: stepDirection().

There are three modes of step direction: center, backward, and forward. The default mode is center (in this case data points are placed to the center of horizontal segments).

In the forward mode data points are the starting points of horizontal segments:

// set step direction to the forward mode


The backward mode sets data points as the final points of horizontal segments:

// set step direction to the backward mode