Taming the Step Line Series

Normal Line series on an XY chart usually connect data items with a straight line. Step line series are similar, except they connect the data items with a step. This tutorial will show how you can tweak the steps to suit your needs better.

Default behavior

Let's take a very basic chart with Step line series:

See the Pen amCharts 4: Step line series (1) by amCharts (@amcharts) on CodePen.24419

We've plopped a bullet on the Step line series, to indicate where the real value is.

As you can see the horizontal line part of each step goes horizontally on the value. It spans the whole width of the category/cell.

Vertical parts (risers) of the line just connect ends of the horizontal lines.

Adjusting step position

Now, let's see how we can change where step starts and ends.

For that we have two Step line series' property startLocation. In human terms it means "put vertical line at this relative position".

The value - "relative position" - is a number between 0 and 1, where zero means start of the cell (default behavior) and 1 means end of the cell.

Any number in-between will mean relative position within cell. E.g. 0.5 will put the vertical part right in the middle - where the bullet is.

Let's try that:

series.startLocation = 0.5;

series.startLocation = 0.5;

{
  // ...
  "series": {
    "type": "StepLineSeries",
    // ...
    "startLocation": 0.5
  }
}

See the Pen amCharts 4: Step line series (2) by amCharts (@amcharts) on CodePen.24419

Disabling risers

To disable vertical line connectors - risers - simply set noRisers to true.

series.noRisers= true;

series.noRisers= true;

{
  // ...
  "series": {
    "type": "StepLineSeries",
    // ...
    "noRisers": true
  }
}

See the Pen amCharts 4: Step line series (2) by amCharts (@amcharts) on CodePen.24419