Plugin: Regression trend lines

This tutorial will explain how you can use Regression plugin (available since version 4.2.2) to display automatically-calculated regression trend lines.

NOTE Regression is a plugin. For information about using plugins, refer to this article.

Purpose

Trend lines, as their name suggests, help identify generic trends among seemingly randomly dispersed values.

Take this chart for example:

See the Pen amCharts 4: Regression trend lines by amCharts team (@amcharts) on CodePen.0

Overall, is our revenue growing or falling? Who knows.

Clever dataviz people have come up with a variety of scientific methods to calculate such trends. They are called regression lines. Let's learn how we can use them.

Adding trend lines

The Regression plugin which we will be using, basically works by turning any LineSeries into a trend line.

This means that creating a trend line is a two-step process:

  1. Create a LineSeries that uses same "data fields" we want to generate trend line for. In our example above, it will use the same data fields as the ColumnSeries.
  2. Turn it into a trend line by plugging Regression plugin into it.
let regseries = chart.series.push(new am4charts.LineSeries());
regseries.dataFields.valueY = "value";
regseries.dataFields.dateX = "date";
regseries.strokeWidth = 2;
regseries.name = "Linear Regression";

regseries.plugins.push(new am4plugins_regression.Regression());
var regseries = chart.series.push(new am4charts.LineSeries());
regseries.dataFields.valueY = "value";
regseries.dataFields.dateX = "date";
regseries.strokeWidth = 2;
regseries.name = "Linear Regression";

regseries.plugins.push(new am4plugins_regression.Regression());
{
// …
"series": [{
// …
}, {
"type": "LineSeries",
"dataFields": {
"valueY": "value",
"dateX": "date"
},
"strokeWidth": 2,
"name": "Linear Regression",
"plugins": [{
"type": "Regression"
}]
}]
}

The Regression plugin will ensure, that instead of using actual value values, it will instead use calculated values that represent a linear trend.

See the Pen amCharts 4: Regression trend lines by amCharts team (@amcharts) on CodePen.0

The beauty of this approach is that your trend line is a regular LineSeries which means you can configure it as such, and also use all of the functionality that you need, including toggling with legend, adding bullets, etc.

Regression methods

Currently, Regression plugin supports two trend calculation methods: linear (default) and polynomial.

To set method, use plugin object's method property. E.g.:

let reg = regseries.plugins.push(new am4plugins_regression.Regression());
reg.method = "polynomial";
var reg = regseries.plugins.push(new am4plugins_regression.Regression());
reg.method = "polynomial";
{
// ...
"series": [{
// ...
}, {
// ...
"plugins": [{
"type": "Regression",
"method": "polynomial"
}]
}]
}

Here's an example displaying both types of the regression on the same chart:

See the Pen amCharts 4: Regression trend lines by amCharts team (@amcharts) on CodePen.0