Curved Pie Chart Labels

PieSunburst#labels#pie

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.

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Pie chart with curved slice labelspie-chart-with-curved-slice-labels

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.

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Pie chart with curved slice labelspie-chart-with-curved-slice-labels-2

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.

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Pie chart with curved slice labelspie-chart-with-curved-slice-labels-3

Selectively positioning labels

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

ResultJSHTMLCSS

Open in:New tabCodePenjsFiddle

Run

Pie chart with curved slice labelspie-chart-with-curved-slice-labels-4

Related content

• Labels inside pie chart slices