Plugins – amCharts 4 Documentation

This article is work in progress. More information coming real soon.

Since version 4.2.2, amCharts has an integrated, simple to use plugin interface, available for all object types. Read on to find out how to use ready-made plugins, and even make your own.

What is it?

A plugin is a class meant to alter or complement functionality of some particular object in a chart or the chart itself.

For example, Regression plugin can turn a simple LineSeries into an automatically calculated trend line, with just a couple lines of code.

Using plugins

Loading

Plugins are not compiled into none of the amChart's main packages - core or charts - and therefore must be loaded separately.

Before you can load a plugin, you need core (main module). Depending on what the plugin does, you might also need charts package, and possibly other packages as well.

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import * as am4plugins_regression from "@amcharts/amcharts4/plugins/regression";

<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/plugins/regression.js"></script>

We'll be importing and referring these as am4core, am4charts, and am4plugins_regression in the course of this article, and overall in our demos and tutorials.

Using

Assigning a plugin to an object is as simple as instantiating an object from the plugin class and pushing it into plugins list of the target object.

Depending on the plugin's purpose and complexity, it might also have its own properties you can set.

let trendLineSeries = chart.series.push(new am4charts.LineSeries());
// ...

let regression = trendLines.plugins.push(new am4plugins_regression.Regression());
regression.method = "linear";

var trendLineSeries = chart.series.push(new am4charts.LineSeries());
// ...

var regression = trendLines.plugins.push(new am4plugins_regression.Regression());
regression.method = "linear";

{
  // ...
  "series": [{
    // ...
  }, {
    "type": "LineSeries",
    // ...
    "plugins": [{
      "type": "Regression",
      "method": "linear"
    }]
  }]
}

That's it, at the moment our plugin is pushed into plugins of the target series, it goes to work doing whatever magic it is supposed to be doing. No further actions necessary.

Available plugins

Regression (trend lines)
SliceGrouper (automatic grouping of small slices)
Range Selector (set of controls to zoom axis)
Overlap Buster (helps with the tightly overlapping items)
Bullets (set of useful complex bullets)
Annotation (set of tools to annotate charts)

Creating new plugins

TODO Information is being prepared.