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

Settings

Simplified lines

Normally, the plugin produce and intermediate data point for each data point in source data it was calculated for.

However, if you are using linear regression, it's a straight line, so just two data points should do: one for the beginning and the other for the end of the trend line.

You can enable such simplification using simplify property:

reg.simplify = true;

reg.simplify = true;

{
  // ...
  "series": [{
    // ...
  }, {
    // ...
    "plugins": [{
      "type": "Regression",
      "simplify": true
    }]
  }]
}

While having no effect on visual appearance of the trend line, using such simplification might give a serious performance boost on data-heavy charts.

Ordering of data

On scatter charts - where you have value axes on both X and Y - data points can come in any order. This might produce an odd-looking trend line. To fix that, you can use Regression's reorder setting:

reg.reorder = true;

reg.reorder = true;

{
  // ...
  "series": [{
    // ...
  }, {
    // ...
    "plugins": [{
      "type": "Regression",
      "reorder": true
    }]
  }]
}

This will ensure that points in a trend line are arranged linearly.

Raw calculation data

Whenever Regression plugin is done calculating data, it will place it in its result property.

You can use "processed" event to find out when it's ready:

reg2.events.on("processed", function(ev) {
  console.log(ev.target.result);
});

reg2.events.on("processed", function(ev) {
  console.log(ev.target.result);
});

{
  // ...
  "series": [{
    // ...
  }, {
    // ...
    "plugins": [{
      "type": "Regression",
      "method": "polynomial",
      "events": {
        "processed": function(ev) {
          console.log(ev.target.result);
        }
      }
    }]
  }]
}

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

Limitations

IMPORTANT Currently plugin will correctly plot data only on regularly-spaced data items.