Variable-radius Pie Slices

This short tutorial will explain how you can create a Pie chart that uses data to vary radius of individual slices.

Base chart

Let's take this simple Pie chart as a basis for our further experiments.

See the Pen amCharts V4: Variable radius pie chart by amCharts team (@amcharts) on CodePen.0

Introducing radius value

Right now, the size of each slice represents a value and its relation to other values in the series.

Suppose we want to introduce a second value, that we want out chart to depict. That second value could be represented by the radius of each slice. The bigger the value - the bigger the slice radius.

Here's a sample data holding two values for each slice:

[{
   country: "Lithuania",
   value: 260,
   value2: 100
 }, {
   country: "Czechia",
   value: 230,
   value2: 35
 }, {
   country: "Ireland",
   value: 200,
   value2: 100
 }, {
   country: "Germany",
   value: 165,
   value2: 80
 }, {
   country: "Australia",
   value: 139,
   value2: 50
 }, {
   country: "Austria",
   value: 128,
   value2: 65
}]

For that specific purpose PieSeries' has an additional "data field": radiusValue.

It works exactly like value data field you already know, but instead of the angle/width of the slice it affects relative radius.

let series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "value";
series.dataFields.radiusValue = "value2";
series.dataFields.category = "country";

var series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "value";
series.dataFields.radiusValue = "value2";
series.dataFields.category = "country";

{
  // ...
  "series": [{
    "type": "PieSeries",
    "dataFields": {
      "value": "value",
      "radiusValue": "value2",
      "category": "country"
    }
  }]
}

Let's see how this looks now.

See the Pen amCharts V4: Variable radius pie chart by amCharts team (@amcharts) on CodePen.0

Note about relative values

It's important to understand that radiusValue is a relative value. It's not a fixed pixel or percent radius.

Just like for regular value the slice's width depends on its value's relation to the rest of the values, period value depends on period values of other slices.

The slice with the biggest radius value will be drawn at full radius.

The slice with the zero radius value will be invisible.

The slice with any other radius value will be drawn with a relative radius, calculated from its position between the biggest value and zero.

E.g. we have three slices with radius values of 10, 5 and 2. The first slice will be biggest, displayed at full radius.

The second slice has a radius value 5, or half the biggest available value, so its radius will be half of the first.

Finally, the last slice has a radius value of 2, which means that its radius will be just 20% of the first slice's radius.