Documentation

Curved Pie Chart Labels

Normally, labels for Pie chart's slices are horizontal, and either arranged in columns or attached to the slice itself. This tutorial will show how you can make labels curve along the outer edge of the slice.

Base chart

Let's take a super basic pie chart as our starting point.

See the Pen amCharts 4: Pie chart with curved slice labels by amCharts team (@amcharts) on CodePen.0

Making labels cool again

To make the labels follow slice's outer edge, we'll need to do to things:

  • Disable alignment of labels.
  • Set their bent setting.
pieSeries.alignLabels = false;
pieSeries.labels.template.bent = true;
pieSeries.alignLabels = false;
pieSeries.labels.template.bent = true;
{
  // ...
  "alignLabels": false,
  "series": [{
    // ...
    "labels": {
      "bent": true
    }
  }]
}

Let's see what that gives us.

See the Pen amCharts 4: Pie chart with curved slice labels by amCharts team (@amcharts) on CodePen.0

Positioning curved labels

You might also want to position labels closer, farther, or even inside the slices.

For that we have radius property.

Set it to bigger value to position labels further away from the slice.

Set it to negative value to move the label inside.

While at it, you might want to set labels padding to zero (so that padding does not interfere with fine-tuning of our positions), as well as disable ticks.

pieSeries.alignLabels = false;
pieSeries.labels.template.bent = true;
pieSeries.labels.template.radius = -10;
pieSeries.labels.template.padding(0, 0, 0, 0);
pieSeries.labels.template.fill = am4core.color("#fff");
pieSeries.ticks.template.disabled = true;
pieSeries.alignLabels = false;
pieSeries.labels.template.bent = true;
pieSeries.labels.template.radius = -20;
pieSeries.labels.template.padding(0, 0, 0, 0);
pieSeries.labels.template.fill = am4core.color("#fff");
pieSeries.ticks.template.disabled = true;
{
  // ...
  "alignLabels": false,
  "series": [{
    // ...
    "labels": {
      "bent": true,
      "radius": -10,
      "paddingTop": 0,
      "paddingRight": 0,
      "paddingBottom": 0,
      "paddingLeft": 0,
      "fill": "#fff"
    },
    "ticks": {
      "disabled": true
    }
  }]
}

Let's see how that looks.

See the Pen amCharts 4: Pie chart with curved slice labels by amCharts team (@amcharts) on CodePen.0

Selectively positioning labels

Here's another example, which will move the labels outside slice if they are less than X percent.

See the Pen amCharts 4: Pie chart with curved slice labels by amCharts team (@amcharts) on CodePen.24419

Related content