Step line series

A step line series is basically the same thing as line series, except instead of connecting data items with direct lines, it displays a stepped plot using only horizontal and vertical lines.

Creating

Line series is created by instantiating LineSeries object using new() method, and pushing it into chart's series list:

let series = chart.series.push(
  am5xy.StepLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date"
  })
);
var series = chart.series.push(
  am5xy.StepLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date"
  })
);

Configuring appearance

Since step line series is a version of a line series, it is configured exactly the same way: via strokes.template and fills.template.

Please refer to "Line series: configuring appearance" for details.

Disabling risers

Step line series uses vertical and horizontal lines to plot steps.

To disable vertical lines (risers), we can simply set noRisers setting to true:

let series = chart.series.push(
  am5xy.StepLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",
    noRisers: true
  })
);
var series = chart.series.push(
  am5xy.StepLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",
    noRisers: true
  })
);

See the Pen
LineSeries with breaks
by amCharts team (@amcharts)
on CodePen.0

Step width

Steps take up the whole width of the cell.

If we have risers disabled, we can modify actual width of the step using series' stepWidth setting, which is a percent value relative to cell width:

let series = chart.series.push(
  am5xy.StepLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",
    noRisers: true,
    stepWidth: am5.percent(50)
  })
);
var series = chart.series.push(
  am5xy.StepLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",
    noRisers: true,
    stepWidth: am5.percent(50)
  })
);