Pie chart labels at start or end of arc instead of center

[Type1J]

I'd like another parameter other than align and anchor to be used for label placement on pie/doughnut charts along the arc. I'm not sure what to call it, but arcPos might be good.

I'd like it to be a value between 0.0 and 1.0 where 0.0 is the beginning of the arc, and 1.0 is the end of the arc. The label placement for pie and doughnut charts currently is stuck at an arcPos of 0.5.

Even if you wanted to stick to the scheme of "begin", "center", or "end", I'd be fine with that, but having a value of 0.0 to 1.0 is more flexible.

[ministe2003]

I have this same problem using a doughnut extension as a gauge. For a gauge it doesn't make sense for the labels to be around the centre of the segments. If the labels could follow the direction of a segment that'd be great and we could have much more control over their position

[gretchenzuefeldt]

I know this is old but I thought I'd add this in case it helps anyone. I made this for myself so you might have to modify some stuff and I had trouble getting the code to format properly on here but here it is:

let numSectors = insert length of data array here; let sectorDegree = 180 / numSectors; let width = (canvas.parent().width() - parseInt(canvas.css('padding').replace("px","")*2)); let fontSize = 16; let b = (width/2)-3; let c = b-(fontSize*1.8); let a = Math.sqrt((Math.pow(b, 2) + Math.pow(c, 2)) - (2*b*c*Math.cos((sectorDegree/2) * Math.PI / 180))); let offset = a-(fontSize*1.2); let alignAngle = (Math.asin(Math.sin((sectorDegree/2) * Math.PI / 180)*c/a) * 180 / Math.PI)- (sectorDegree/2);

                         `   datalabels: {
                                        display: true,
                                        anchor: 'end',
                                        font: {
                                            size: fontSize,
                                        },
                                        offset: offset,
                                        align: function(context){
                                            return (sectorDegree * context.dataIndex) - alignAngle;
                                        },
                                }`

[aumartinez]

Hi it has been 3 years since this was suggested

[naomipol]

Take a look at my solution in stackoverflow:
https://stackoverflow.com/a/70322286/4610489