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
Any advice on how to rotate each label around the center?
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
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.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
Hope this helps!
Wow Ian! That is an awesome solutions! Thank you for your help!