Black Lives Matter. Please consider donating to Black Girls Code today.

Annotations on Pie Chart

I’m am adding annotations to a pie chart dynamically via capturing the plotly_click event. I am trying to use the data.points[0].cx/cy values as the x and y coordinates for setting the annotation but the annotation position is defaulting to the center of the pie chart, which is fine as the editable flag is enabled so the user can move the annotation to where they desire. The problem is when I am capturing the plotly_relayout event and print the event changes to the console, no matter where the annotation point is moved (x/y, not ax/ay) it resets the x/y back to the center position in the chart.

Is there a way to tie the annotation to the canvas coordinates instead of the plot? Although, not sure if that would work because of redrawing the plot for responsive behavior.
CodePen example



Not for pie charts at the moment.

So I was able to get the annotation to tie to the canvas coordinates by setting the X and Y values to blank and setting the XREF and YREF values to “paper”. But again, this isn’t viable since as the graph scales, the annotation point does not stay consistent.

My rephrased question is whether an annotation can be tied to a slice of a pie and have it move with that point on responsive resizes?


Not at the moment. I’d recommend using textposition: 'outside' as in to achieve something similar.