Sum label inside a donut chart

This tutorial will show how we can easily add some labels inside a donut chart to display complementing information, such as sum of values for all the slices.

Adding a label

Most of the elements in amCharts 5 is a Container, meaning it can contain other elements.

Chart itself is a container. Series is a container. Legend is a container.

To add a label all we need to do is to add a Label instance.

For our specific purpose, we are going to add a Label to series. We'll explain why in due course.

let label = series.children.push(am5.Label.new(root, {
  text: "Hi there!",
  fontSize: 40,
  centerX: am5.percent(50),
  centerY: am5.percent(50)
}));

var label = series.children.push(am5.Label.new(root, {
  text: "Hi there!",
  fontSize: 40,
  centerX: am5.percent(50),
  centerY: am5.percent(50)
}));

Notice how we're setting the centerX and centerY of our label: we do want it to be placed perfectly aligned to the middle.

Binding to data

Now, let's bind the label contents to actual data.

That's where our decision to create label as a child to series comes into play: we can use data placeholders to access actual data from series.

In our case we can use {valueSum} to access sum of slice values, held in series' private (read-only) settings:

let label = series.children.push(am5.Label.new(root, {
  text: "${valueSum}",
  fontSize: 40,
  centerX: am5.percent(50),
  centerY: am5.percent(50),
  populateText: true
}));

var label = series.children.push(am5.Label.new(root, {
  text: "${valueSum}",
  fontSize: 40,
  centerX: am5.percent(50),
  centerY: am5.percent(50),
  populateText: true
}));

Please note the populateText: true setting in the configuration of the label. Without it, data placeholders are not populated.

MORE INFO For more on inserting data placeholders, as well as in-line formatting of string label, refer to "Formatters" tutorial.

Working example

See the Pen
amCharts 5: Donut chart with sum in the middle by amCharts team (@amcharts)
on CodePen.0