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:

- 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`

. - 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