AM Charts - Pie Charts

am-charts

https://www.amcharts.com/docs/v4/chart-types/pie-chart/

What is the data of pie chart look like?

Just like for most chart types, the data for a Pie chart is an array of objects. Each of those objects will represent a Slice and must at least contain one numeric value (Slice value) and a category (Slice title).

chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
}];

What is a series?

A pie chart consists of a number of slices (or an array (or series) of slices). In amCharts 4 universe, Pie chart is a serial chart. A series of Slices is represented by an instance of PieSeries class. In most serial charts, Pie chart included, all Series are included in a List accessible via chart's series property. To create a new Series, we just going to create a new instance of PieSeries and push it into chart.series:

var pieSeries = chart.series.push(new am4charts.PieSeries());

Now that we have a Series, we need to set it up. At the very least, we need to specify the fields in data, this Series will get its values from. (remember a PieSeries needs a numeric value and a string title/category for each Slice). That's where Series property dataFields comes into play:

pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";

As you can see, Slice's numeric value is represented by a data field "value", while string title with a "category".

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>

<div id="chartdiv" style="width: 100%; height: 400px;"></div>

<script>
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
}];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
</script>

In the above code, using pieSeries.dataFields.value and pieSeries.dataFields.category, we specify which field within our data contains the value for the slice, and which field within our data contain the label for the slice.

How can we turn a pie chart into a donut chart?

We can make Pie chart into a Donut chart by setting chart's innerRadius property:

chart.innerRadius = am4core.percent(40);

What is a template of a pie chart?

Let's make each slice have white outline borders. To do that, we'll need to access PieSeries' slices property, or more precisely its template property. PieSerie's slices.template holds a dummy object of the Slice class, which will be used as a template (hence the name) when creating actual Slices. It has all the same properties as the Slice class (because it is an instance of the Slice class, duh). Anything you set on a template will make it onto actual slices. OK, so let's add a dark border around each slice to make them more prominent:

pieSeries.slices.template.stroke = am4core.color("#4a2abb");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;

How can we disable various elements of a pie chart?

It's possible to disable various elements like ticks, labels and rollover tooltips. To disable the former, use templates of the respectively named ticks and labels list templates:

pieSeries.labels.template.disabled = true;
pieSeries.ticks.template.disabled = true;

You can use those same templates to also configure labels and ticks, like for example set fill to change color.

How can we disable tooltip on a pie chart?

To disable the tooltip which appears on slice hover, simply reset tooltipText on its template:

pieSeries.slices.template.tooltipText = "";

How can we control the appearance of a pie chart via states?

States is a powerful amCharts 4 concept allowing application of property values to elements when certain actions happen. Like, for example, an element is hovered.

Pie series' slices has already three states pre-created for us:

  1. "default" state, which is applied when slice is in its initial position.
  2. "hover" state, which is applied when you hover or touch the slice.
  3. "active" state, which is applied when you click or tap the slice so it pulls out.

Each of those states, apply values to certain slice properties to modify its appearance. For example, "hover" state, when applied, sets slice's scale to 1.1 making it grow slightly. When you click a slice and "active" state is applied, it sets slice's shiftRadius property, which makes slice look pulled out. To modify how slices behave in each of those scenarios, you need to modify the respective states' properties values. For example, if we don't want the slice to grow on hover, we'd do this:

var hs = pieSeries.slices.template.states.getKey("hover");
hs.properties.scale = 1;

Similarly, if we don't want slice to pull out on click, we'd need to modify "active" state:

var as = pieSeries.slices.template.states.getKey("active");
as.properties.shiftRadius = 0;

We can also, modify any of the slices' properties that way just as well. For example, if we want to disable growing on hover, but would rather modify fill opacity of the slice, we can do this:

pieSeries.slices.template.fillOpacity = 1;

var hs = pieSeries.slices.template.states.getKey("hover");
hs.properties.scale = 1;
hs.properties.fillOpacity = 0.5;

Notice, how we set fillOpacity on slice template as well. This is required, so that slice knows that it needs to return to this particular fill opacity when is no longer hovered.

What is hoverActive?

One more thing before you go. There's also a specially-named theme: "hoverActive". It is not created by default, so you would need to create it. If created, it will be applied in those situations when an "active" slice is hovered.

How can we create a legend?

Even if it's not required, adding a legend might improve user experience. It can provide visual reference for the user, as well as allow toggling certain Slices. To add a legend, we simply create an instance of Legend class and assign it to chart's legend property. It's as simple as that.

chart.legend = new am4charts.Legend();

How can we create a nested pie / donut chart?

A Pie chart can have more than one PieSeries. To create nested Pie/Donut charts, we simply add multiple PieSeries. (making sure they have their dataFields configured properly to point at correct properties in the data).

am4core.useTheme(am4themes_animated);

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);

// Let's cut a hole in our Pie chart the size of 40% the radius
chart.innerRadius = am4core.percent(40);

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9,
  "bottles": 1500
}, {
  "country": "Czech Republic",
  "litres": 301.9,
  "bottles": 990
}, {
  "country": "Ireland",
  "litres": 201.1,
  "bottles": 785
}, {
  "country": "Germany",
  "litres": 165.8,
  "bottles": 255
}, {
  "country": "Australia",
  "litres": 139.9,
  "bottles": 452
}, {
  "country": "Austria",
  "litres": 128.3,
  "bottles": 332
}, {
  "country": "UK",
  "litres": 99,
  "bottles": 150
}, {
  "country": "Belgium",
  "litres": 60,
  "bottles": 178
}, {
  "country": "The Netherlands",
  "litres": 50,
  "bottles": 50
}];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;

// Disabling labels and ticks on inner circle
pieSeries.labels.template.disabled = true;
pieSeries.ticks.template.disabled = true;

// Disable sliding out of slices
pieSeries.slices.template.states.getKey("hover").properties.shiftRadius = 0;
pieSeries.slices.template.states.getKey("hover").properties.scale = 0.9;

// Add second series
var pieSeries2 = chart.series.push(new am4charts.PieSeries());
pieSeries2.dataFields.value = "bottles";
pieSeries2.dataFields.category = "country";
pieSeries2.slices.template.stroke = am4core.color("#fff");
pieSeries2.slices.template.strokeWidth = 2;
pieSeries2.slices.template.strokeOpacity = 1;
pieSeries2.slices.template.states.getKey("hover").properties.shiftRadius = 0;
pieSeries2.slices.template.states.getKey("hover").properties.scale = 1.1;

In the above code, each of our data element contains 3 properties (one string, and two numeric), but we created two instances of PieSeries, and each instance has its own dataFields.value and dataFields.category properties.

How can we modify default information?

By default Pie chart displays all values - in slice labels, rollover tooltips, legend - as percent. If you'd rather like to display them as absolute values, or otherwise modify default information, you will need to adjust various settings across your chart.

Slice label content is regulated by a sample template object of the Pie series, accessible by pieSeries.labels.template. So, if we'd like to change what is displayed in it we will need to modify label.text property of it:

pieSeries.labels.template.text = "{category}: {value.value}";

What goes into tooltip when you hover a Pie slice is regulated by slice template's tooltipText property. If you'd like to change it, that's the property you set:

pieSeries.slices.template.tooltipText = "{category}: {value.value}";

Finally, if you'd like to set what value is displayed in the legend, you'll need to set text for its value labels template:

chart.legend.valueLabels.template.text = "{value.value}";

What are the differences between a regular pie chart and a 3D pie chart?

A 3D Pie in amCharts 4 is a separate chart type represented by a class PieChart3D. It is almost identical to PieChart, save for a few extra properties that deal with the 3D appearance. To oversimplify, to convert any regular Pie chart to a 3D Pie chart, slap a "3D" to any class and/or module:

  1. am4charts.PieChart: am4charts.PieChart3D
  2. am4charts.PieSeries: am4charts.PieSeries3D
  3. am4charts.Legend: am4charts.Legend (Legend is not 3D; it's shared across multiple chart types)

How can we group slices?

With the help if SliceGrouper plugin, you can make Pie Chart automatically group small slices into "Other" group.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License