Different column fill colors for positive and negative values

This tutorial will explain how you can use adapters to fill columns to different colors, based on their value.

The task

Let’s say we have a column chart that has both positive and negative values.

Open in CodePen

Right now, all of the columns are filled with a single color.

What we want to do, is to color negative-value ones in red. Let’s see how we can do that.

The solution

We are going to be using an adapter on column’s fill property to modify its color.

An adapter is a custom function that kicks in just before value of the property is used, and has a chance of modifying it. For more about adapters, read here.

TypeScript

series.columns.template.adapter.add("fill", function(fill, target) {  if (target.dataItem && (target.dataItem.valueY < 0)) {    return am4core.color("#a55");  }  else {    return fill;  }});

JavaScript

series.columns.template.adapter.add("fill", function(fill, target) {  if (target.dataItem && (target.dataItem.valueY < 0)) {    return am4core.color("#a55");  }  else {    return fill;  }});

JSON

{  // ...  "series": [{    // ...    "columns": {      "adapter": {        "fill": function(fill, target) {          if (target.dataItem && (target.dataItem.valueY < 0)) {            return am4core.color("#a55");          }          else {            return fill;          }        }      }    }  }]}

Open in CodePen