Rotate Label on Pie / Donut Charts

1

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

image
image748×727 69.6 KB

I have this QuickChart working

Which is pretty close :smiley:

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

2

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.dataset.data.slice(0, ctx.dataIndex).reduce((a, b) => a + b, 0);
          const sum = ctx.dataset.data.reduce((a, b) => a + b, 0);
          let rotation = ((valuesBefore + ctx.dataset.data[ctx.dataIndex] / 2) / sum * 360) + 90;
          if (rotation > 90 && rotation < 270) {
            rotation += 180;
          }
          return rotation;
        },

Here’s a link to the full config

pie chart with rotated data labels
pie chart with rotated data labels1000×600 78.6 KB

Hope this helps!

1 Like
3

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