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.

Open in CodePen

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.

TypeScript

pieSeries.alignLabels = false;pieSeries.labels.template.bent = true;

JavaScript

pieSeries.alignLabels = false;pieSeries.labels.template.bent = true;

{  // ...  "alignLabels": false,  "series": [{    // ...    "labels": {      "bent": true    }  }]}

Let’s see what that gives us.

Open in CodePen

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.

TypeScript

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;

JavaScript

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.

Open in CodePen

Selectively positioning labels

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

Open in CodePen

Related content

• Labels inside pie chart slices