“3D” line series

This tutorial will show how you can easily create a "3D stack" effect on regular LineSeries.

Base chart

Let's take this chart as an example:

See the Pen amCharts 4: 3D line series by amCharts team (@amcharts) on CodePen.0

Bit of a mess.

It would help, if we somehow would be able make each individual LineSeries stand out.

Enabling 3D

The first step is to go from regular XYChart to its 3D descendant - XYChart3D:

var chart = am4core.create("chartdiv", am4charts.XYChart3D);
chart.depth = 200;
var chart = am4core.create("chartdiv", am4charts.XYChart3D);
chart.depth = 200;
var chart = am4core.createFromConfig({
"depth": 200,
// ...
}, "chartdiv", am4charts.XYChart3D);

That enables 3D, but does not help us much:

Shifting series

The chart does not automatically shift LineSeries, so we'll need to do it ourselves.

Luckily, position of literally anything in amCharts 4 can be fine-tuned using dx and dy properties.

So if we wanted to shift a series upwards and to the right, we could do something like this:

series.dx = 20;
series.dy = -20;
series.dx = 20;
series.dy = -20;
{
// ...
"series": [{
// ...
"dx": 20,
"dy": -20
}]
}

This will shift the series 20 pixels to the right, and 20 pixels upwards.

That said, hard-coding positions is for wussies, right? Let's automatically calculate the dx and dy based on the number of series and series index:

series.dx = chart.depth / (count) * am4core.math.cos(chart.angle) * index;
series.dy = -chart.depth / (count) * am4core.math.sin(chart.angle) * index;
series.dx = chart.depth / (count) * am4core.math.cos(chart.angle) * index;
series.dy = -chart.depth / (count) * am4core.math.sin(chart.angle) * index;
{
// ...
"series": [{
// ...
// We don't need to offset the first series
"dx": 0,
"dy": 0
}, {
// …
"dx": 200 / (3) * am4core.math.cos(30) * 1,
"dy": -200 / (3) * am4core.math.sin(30) * 1
}, {
// …
"dx": 200 / (3) * am4core.math.cos(30) * 2,
"dy": -200 / (3) * am4core.math.sin(30) * 2
}]
}

Working example

See the Pen amCharts 4: 3D line series by amCharts team (@amcharts) on CodePen.0