Rotate Label on Pie / Donut Charts

Hi Team, any idea how to rotate Pie Chart labels?

I am trying to recreate this static donut chart from excel with live budget data

I have this QuickChart working

Which is pretty close :smiley:

Any advice on how to rotate each label around the center?

You can do this using the rotation property of the datalabels plugin. A simple rotation looks like this:

rotation: 45   // rotate all labels 45 degrees

But you can also specify a function, which has access to the label context:

rotation: (ctx) => { /* your logic here */ }

Orienting every label toward the center of the chart is actually kind of a fun problem:

        rotation: function(ctx) {
          const valuesBefore =, ctx.dataIndex).reduce((a, b) => a + b, 0);
          const sum =, b) => a + b, 0);
          let rotation = ((valuesBefore +[ctx.dataIndex] / 2) / sum * 360) + 90;
          if (rotation > 90 && rotation < 270) {
            rotation += 180;
          return rotation;

Here’s a link to the full config

Hope this helps!

1 Like

Wow Ian! That is an awesome solutions! Thank you for your help! :grinning: