Subtitles for PieCharts in a pretty way

Hi, I create piecharts with many subplots inside and want to label each pie-chart. The number of sub-piecharts is dynamically (e.g just one or twelve). How can I labeling beautiful each sub-piechart? Of course the approach is to use annotations. But how to set the correct x,y to center them.

I tried some algorithms for specify, where the sub-piechart should be and where the label should be. But e.g. if the plot size varies from to screen size to screen size it looks different. Are there any smart tricks for achieve my goal? (centering the label above each sub-piechart). My minimum example is this: https://jsfiddle.net/908z4qht/1/11

Its sets the position of each piechart dynamically and also for the annotation/label

//iterate dynamically over piecharts and put the name as subtitle of the plot
var annotations=[];
var xPerTrace = 1/data.length;
var startX = 0;
for(var i = 0; i<data.length; i++){
	//set domain of 
  data[i].domain={
  	x:[startX, startX+xPerTrace],
    y:[0.1,1]
  }

  //create annotation for it
  annotations.push({
		    font: {
	          size: 10
	        },
	        xanchor: 'left',
	        yanchor: 'bottom',
	        xref: 'paper',
	        showarrow: false,
	        text: data[i].name,
	        x: startX,
	        y: 0//,
	        //bgcolor: "rgba(255,33,22,0)"
		});
    
    //increase startX
  startX+=xPerTrace;
}

You’re probably pretty close.

Have you tried setting xanchor and yanchor in each of your annotations to help you position them correctly?

1 Like

Docs:

1 Like

Hey @etienne: Thank you very much for this hint. I think I solved my problem and will check it for my plot code. Here is the solution for my min-example I have given you: https://jsfiddle.net/908z4qht/2/