Alternated axis fills

Radar XY #axes

This short tutorial will show how you can make your XY chart more readable by introducing a fill between each second set of grid lines.

Enabling axis fills

We’ll let you in on a secret: each axis is already filling the space between each second set of its grid lines.

You just can’t see it because those fills are disabled by default.

They are there, though. In the axis renderer’s axisFills list.

Naturally, if we want to enable and configure those fills, we need to modify renderer.axisFills.template.

categoryAxis.renderer.axisFills.template.disabled = false;
categoryAxis.renderer.axisFills.template.fillOpacity = 0.1;
categoryAxis.renderer.axisFills.template.fill = am4core.color("red");

categoryAxis.renderer.axisFills.template.disabled = false;
categoryAxis.renderer.axisFills.template.fillOpacity = 0.1;
categoryAxis.renderer.axisFills.template.fill = am4core.color("red");

{
  // ...
  "xAxes": [{
    // ...
    "renderer": {
      // ...
      "axisFills": {
        "disabled": false,
        "fillOpacity": 0.1,
        "fill": "red"
      }
    }
  }]
}

Any axis type can use axis fills. You can even enable them on several axis, to create crazy checkered setups:

Extending to axis labels

Axis fills work within plot area only. That said, there’s a trick to extend the fill to go beyond, so it covers axis labels as well.

We can use an adapter to modify plot area’s height via pixelHeight (or pixelWidth if we’re modifying horizontal fills):

chart.plotContainer.adapter.add("pixelHeight", function(value, target) {
  return value + 40;
});

chart.plotContainer.adapter.add("pixelHeight", function(value, target) {
  return value + 40;
});

{
  // ...
  "plotContainer": {
    "adapter: {
      "pixelHeight": function(value, target) {
        return value + 40;
      }
    }
  }
}

The above will make plot area higher by 40 pixels, which will fool axis fills, striving to cover the whole height, to grow as well: