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