Using Axis Ranges on Radar Chart

This quick tutorial will show how you can use Axis Ranges on a Radar chart.

If you are already using Radar chart, you know that its essentially bent XY chart. Which means it has X and Y axes, that can be one of the three types: Value, Date, or Category.

This also means, that whatever you can do with those axes on an XY chart, you can do here as well. That includes adding Axis Ranges.

Let's say we have a very simple Radar/Polar chart with a Value axis as it's radial axis (Y) and Category axis as its circular axis (X).

We'd go about adding ranges on the Category axis, just like we would on the XY chart:

let range = categoryAxis.axisRanges.create();
range.category = "NW";
range.endCategory = "NW";
range.axisFill.fill = am4core.color("#0066CC");
range.axisFill.fillOpacity = 0.3;

var range = categoryAxis.axisRanges.create();
range.category = "NW";
range.endCategory = "NW";
range.axisFill.fill = am4core.color("#0066CC");
range.axisFill.fillOpacity = 0.3;

{
  // ...
  "xAxes": [{
    "type": "CategoryAxis",
    // ...
    "axisRanges": [{
      "category": "NW",
      "endCategory": "NW",
      "axisFill": {
        "fill": "#0066CC",
        "fillOpacity": 0.3
      }
    }]
  }]
}

Now, let's see it in action:

See the Pen amCharts V4: Polar chart by amCharts (@amcharts) on CodePen.24419

A few notes above demo above.

If you take a look the at the code, you notice that the upper range, is actually two ranges. One goes from NW to NW, and the other from N to N categories. This is needed, because a Range cannot span beyond the end of the Category axis, and NW is the last category.

So we need our would be single Range into two.

The lower Range (SE to SW) uses additional setting: locations.

Normally, a Range on a Category axis will start at the very beginning of the category, and will end at end of endCategory. This is why, when we tell the Range to be from N to N, it fills the whole width of that category.

That works nice for a single category, but might be misleading for ranges spanning several categories. E.g. we want a Range to fill between SE and SW. If we'd set endCategory = "SW" it would fill to the end of SW, which would make the impression it was filling all the way to W.

locations allows us to override that. We set locations.endCategory = 0 which means "use start of the category".