Still have questions?
Contact support

# Step Line Chart

## Overview

A step line chart is a line chart in which points are connected by horizontal and vertical line segments, looking like steps of a staircase.

Step line 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. While the line chart emphasizes the trend in data over time, the step line chart draws attention from the trend to show periods with no change and emphasize the exact time of each change as well as its magnitude.

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

API DATA Modules Core + Basic Cartesian / Base Class anychart.core.cartesian.series.StepLine Data Fields x, value Multiple Series YES Stacked N/A Vertical Vertical Step Line 3D N/A Error Bars Step Line Chart with Error Bars Polar N/A Radar N/A Scatter N/A Stock Stock Step Line Line Spline Chartopedia: Step Line Chart General Settings

## Modules

The Step Line 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>
``````

## Quick Start

To create a Step Line series, use the stepLine() method (before, of course, you should create a chart by using anychart.stepLine() or any other cartesian chart constructor):

``````// create data
var data = [
{x: "1995", value: 0.10},
{x: "1996", value: 0.10},
{x: "1997", value: 0.12},
{x: "1998", value: 0.13},
{x: "1999", value: 0.15},
{x: "2000", value: 0.15},
{x: "2001", value: 0.15},
{x: "2002", value: 0.19},
{x: "2003", value: 0.20}
];

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

// create a step line series and set the data
var series = chart.stepLine(data);

// set step direction to the forward mode
series.stepDirection("forward");

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();
``````

## Settings

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

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

In addition, see the full list of methods available for the Step Line series: anychart.core.cartesian.series.StepLine.

## Special Settings

### Step Direction

The Step Line 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
series.stepDirection("forward");
``````

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

``````// set step direction to the backward mode
series.stepDirection("backward");
``````