Adapters

Adapters are custom functions that can be used to dynamically alter value of an element's setting.

Adding

And adapter can be added directly to an object or to template using its adapters.add() method.

This method requires two parameters:

  • Key of the setting the adapter will be used to modify value for.
  • Function that will be run every time setting value is requested, which can modify the value.

The following code can be used to modify fill color of the column series columns based on their value:

series.columns.template.adapters.add("fill", function(fill, target) {
  if (target.dataItem.get("valueY") < 1000) {
    return am5.color(0xff621f);
  }
  else {
    return fill;
  }
});
series.columns.template.adapters.add("fill", function(fill, target) {
  if (target.dataItem.get("valueY") < 1000) {
    return am5.color(0xff621f);
  }
  else {
    return fill;
  }
});

The above means that before column is drawn, its default fill color will be ran through our custom function. It will check related data item value and if it's less than 1000, it will use reddish color instead of default series color.

See the Pen
Styling ColumnSeries
by amCharts team (@amcharts)
on CodePen.0