Creating trend lines

Sometimes, on charts, the general appearance of the series does not make data tendencies very prominent. In those situations, you might want to add trend lines that explain the general dynamics. This tutorial explains, how you can use generic Line series as trend lines.

Prerequisites

We are going to assume you know your way around series in amCharts 4. If you don't, head over to our "Series" article for an intro.

Base chart

We're going to take a basic date-based line chart for testing:

See the Pen amCharts 4: Trend lines (1) by amCharts (@amcharts) on CodePen.24419

Adding trend lines

It's time to let you in on a secret: there are no dedicated "trend lines" in amCharts 4. [mind blown]

The reason for that is that Line series in amCharts 4 is more than capable of handling any trend line duties on its own.

Plus, a series can have its own data so you the can be be completely independent of the chart's data.

Bottom line, to add a trend line, you add an additional LineSeries with its own data property set. Something like this:

let trend = chart.series.push(new am4charts.LineSeries());
trend.dataFields.valueY = "value";
trend.dataFields.dateX = "date";
trend.strokeWidth = 2
trend.stroke = am4core.color("#c00");
trend.data = [
  { "date": "2012-01-02", "value": 10 },
  { "date": "2012-01-11", "value": 19 }
];

var trend = chart.series.push(new am4charts.LineSeries());
trend.dataFields.valueY = "value";
trend.dataFields.dateX = "date";
trend.strokeWidth = 2
trend.stroke = am4core.color("#c00");
trend.data = [
  { "date": "2012-01-02", "value": 10 },
  { "date": "2012-01-11", "value": 19 }
];

{
  // ...
  "series": [{
    // ...
  }, {
    "type": "LineSeries",
    "dataFields": {
      "valueY": "value",
      "dateX": "date"
    },
    "strokeWidth": 2,
    "stroke": "#c00",
    "data": [
      { "date": "2012-01-02", "value": 10 },
      { "date": "2012-01-11", "value": 19 }
    ]
  }]
}

Or, if we want to be adding multiple trend lines, we can create a function to cookie-stamp trend lines:

function createTrendLine(data) {
  let trend = chart.series.push(new am4charts.LineSeries());
  trend.dataFields.valueY = "value";
  trend.dataFields.dateX = "date";
  trend.strokeWidth = 2
  trend.stroke = am4core.color("#c00");
  trend.data = data;

  let bullet = trend.bullets.push(new am4charts.CircleBullet());
  bullet.strokeWidth = 2;
  bullet.stroke = am4core.color("#fff")
  bullet.circle.fill = trend.stroke;
};

createTrendLine([
  { "date": "2012-01-02", "value": 10 },
  { "date": "2012-01-11", "value": 19 }
]);

createTrendLine([
  { "date": "2012-01-17", "value": 16 },
  { "date": "2012-01-22", "value": 10 }
]);

function createTrendLine(data) {
  var trend = chart.series.push(new am4charts.LineSeries());
  trend.dataFields.valueY = "value";
  trend.dataFields.dateX = "date";
  trend.strokeWidth = 2
  trend.stroke = am4core.color("#c00");
  trend.data = data;

  var bullet = trend.bullets.push(new am4charts.CircleBullet());
  bullet.strokeWidth = 2;
  bullet.stroke = am4core.color("#fff")
  bullet.circle.fill = trend.stroke;
};

createTrendLine([
  { "date": "2012-01-02", "value": 10 },
  { "date": "2012-01-11", "value": 19 }
]);

createTrendLine([
  { "date": "2012-01-17", "value": 16 },
  { "date": "2012-01-22", "value": 10 }
]);

See the Pen amCharts 4: Trend lines (2) by amCharts (@amcharts) on CodePen.24419

The benefit of using Line series is that it automatically brings the whole power of LineSeries. Want to have multiple data points? Set line appearance? Use bullets? Fills? Filters? Go ahead.