Guidence in setting up titles in pie chart subplots

plotly.js
1

Hi guys

I’m kinda new to this forum and I don’t how should I write questions and stuff like this. At any case if please let me know if something is not clear.

I need some advise on setting up titles for subplot pie charts. For a project that I’m doing I need to show the crime distribution(violent/non-violent) for a given Police District. End end goal should be a plot comprised of multiple subplots where each Subplot should have a title. Currently I don’t know how to set the subtitles.Ex of a title would be ‘Violent Crime Distribution Police District1’.

Example of dataframe showing violent/-non violent crime distribution for Police District 1 pd_1D:
labels values
0 Non-Violent 2097
1 Violent 1362

This is the sample of the plotly code used to plot the pie charts subplots:

fig= {
‘data’:[{
‘labels’:pd_1D[‘labels’],
‘values’:pd_1D[‘values’],
‘type’:‘pie’,
‘name’:‘PD 1D’,
‘domain’: {‘x’: [0, .20],
‘y’: [0, .49]},
‘textinfo’:‘blahcjakjsa’
},
{
‘labels’:pd_2D[‘labels’],
‘values’:pd_2D[‘values’],
‘type’:‘pie’,
‘name’:‘PD 2’,
‘domain’: {‘x’: [.35, .55],
‘y’: [0, .49]},
‘textinfo’:‘PD 2D’
}
],
‘layout’: {‘title’: ‘Violent/Non-Violent crime distribution/Police District Number’}
}
iplot(fig, filename=‘pie_chart_subplots’))

This is the reference from ploty official site:
https://plot.ly/python/pie-charts/

However I can’t seem to find a way to add a title for each individual subplots. Please see below print screen with the subplots

pie_charts_subplots_with_plotly.PNG951×472 24.8 KB

I’m able to achive this in matplotlib. Please see attached

pie_charts_subplots_matplotlib.PNG1017×317 22.8 KB

This is a snipped of the code used with mathplotlib

ax1, ax2, ax3, ax4, ax5 , ax6 = fig.axes
ax1.pie(pd_1D_values, labels=pd_1D_labels,explode=explode, autopct=’%1.1f%%’, shadow=True)

Equal aspect ratio ensures that pie is drawn as a circle.

ax1.axis(‘equal’)
ax1.set_title(‘PD 1D’)

plt.suptitle(‘title_string’, x=1.1,y=3.1, fontsize=25)
plt.subplots_adjust(left = 0.12,right = 2.3,bottom = 0.9,top = 2.9,wspace = 1 ,hspace = 0.2 )
plt.show()

Please advise.
Mihai

2

You’ll need to use annotations to get the desired behavior:

3

I create also 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?
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/
Its determining 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;
}
4

For my last post I created an own question in this forum (Subtitles for PieCharts in a pretty way) and had solved the problem with help of @etienne by using x-anchor: center