Quickly assign names to multiple pie-charts in Dash

Dash Python
1

I’m trying to display multiple different pie charts in Dash. While this in itself is not that hard to do, assigning titles to them appears to be very hard. Please consider the following code from this tutorial:

fig = {
  "data": [
    {
      "values": [16, 15, 12, 6, 5, 4, 42],
      "labels": [
        "US",
        "China",
        "European Union",
        "Russian Federation",
        "Brazil",
        "India",
        "Rest of World"
      ],
      "domain": {"x": [0, .48]},
      "name": "GHG Emissions",
      "hoverinfo":"label+percent+name",
      "hole": .4,
      "type": "pie"
    },
    {
      "values": [27, 11, 25, 8, 1, 3, 25],
      "labels": [
        "US",
        "China",
        "European Union",
        "Russian Federation",
        "Brazil",
        "India",
        "Rest of World"
      ],
      "text":"CO2",
      "textposition":"inside",
      "domain": {"x": [.52, 1]},
      "name": "CO2 Emissions",
      "hoverinfo":"label+percent+name",
      "hole": .4,
      "type": "pie"
    }],
  "layout": {
        "title":"Global Emissions 1990-2011",
        "annotations": [
            {
                "font": {
                    "size": 20
                },
                "showarrow": False,
                "text": "GHG",
                "x": 0.20,
                "y": 0.5
            },
            {
                "font": {
                    "size": 20
                },
                "showarrow": False,
                "text": "CO2",
                "x": 0.8,
                "y": 0.5
            }
        ]
    }
}
py.iplot(fig, filename='donut')

In order to give each donut a title, it is necessary to use annotations and coordinates for every separate graph. While this is doable for two donut graphs, it certainly becomes an awful lot of work for 10 - 20 of them. Furthermore, once you have managed to get the coordinates right so that the titles fit nicely above the graphs, you can repeat the whole process if you want to change the titles (because of different title lengths).

My Question: Is there a quicker way to assign titles to pie-charts then suggested in the tutorial mentioned earlier?

I’ve tried the following approaches:

  • Create 10 different dcc.Graph elements in my app. This doesn’t seem to give nice results.
  • Use plotly.tools. Unfortunately tools doesn’t work with pie-charts.
2

Why are multiple dcc.Graph elements “not nice”?

3

When I run the following code, the legends of the pie-charts don’t show up anymore and the pie-charts themselves become very small. What I meant with not very nice is that instead of just scaling down the entire frame of the graph, the pie-charts themselves are even smaller.

app.layout = html.Div([
    dcc.Graph(
        id = 'pie-chart-1',
        figure = {
            'data': [
                {'labels':['Positive','Negative','Neutral'],'values':[2,1,5], 'type': 'pie'}
            ],
        }
    ),
    dcc.Graph(
        id = 'pie-chart-2',
        figure = {
            'data': [
                {'labels':['Positive','Negative','Neutral'],'values':[2,1,5], 'type': 'pie'}
            ],
            'layout': go.Layout(showlegend=False)
        }
    ),
    dcc.Graph(
        id = 'pie-chart-3',
        figure = {
            'data': [
                {'labels': ['Positive','Negative','Neutral'], 'values': [2, 1, 5], 'type': 'pie'}
            ],
            'layout': go.Layout(showlegend=False)
        }
    ),
    dcc.Graph(
        id = 'pie-chart-4',
        figure = {
            'data': [
                {'labels': ['Positive','Negative','Neutral'], 'values': [2, 1, 5], 'type': 'pie'}
            ],
            'layout': go.Layout(showlegend=False)
        }
    ),
    dcc.Graph(
        id = 'pie-chart-5',
        figure = {
            'data': [
                {'labels':['Positive','Negative','Neutral'],'values':[2,1,5], 'type': 'pie'}
            ],
            'layout': go.Layout(showlegend=False)
        }
    ),
    dcc.Graph(
        id = 'pie-chart-6',
        figure = {
            'data': [
                {'labels':['Positive','Negative','Neutral'],'values':[2,1,5], 'type': 'pie'}
            ],
            'layout': go.Layout(showlegend=False)
        }
    ),
    dcc.Graph(
        id = 'pie-chart-7',
        figure = {
            'data': [
                {'labels': ['Positive','Negative','Neutral'], 'values': [2, 1, 5], 'type': 'pie'}
            ],
            'layout': go.Layout(showlegend=False)
        }
    ),
    dcc.Graph(
        id = 'pie-chart-8',
        figure = {
            'data': [
                {'labels': ['Positive','Negative','Neutral'], 'values': [2, 1, 5], 'type': 'pie'}
            ],
            'layout': go.Layout(showlegend=False)
        }
    ),
    dcc.Graph(
        id = 'pie-chart-9',
        figure = {
            'data': [
                {'labels': ['Positive','Negative','Neutral'], 'values': [2, 1, 5], 'type': 'pie'}
            ],
            'layout': go.Layout(showlegend=False)
        }
    ),
    dcc.Graph(
        id = 'pie-chart-10',
        figure = {
            'data': [
                {'labels': ['Positive','Negative','Neutral'], 'values': [2, 1, 5], 'type': 'pie'}
            ],
            'layout': go.Layout(showlegend=False)
        }
    ),

], style = {'width': '50%','columnCount': 5})

if __name__=='__main__':
    app.run_server(debug=True)
4

For graphs in smaller viewports, make sure to set the margins to something small: figure: layout: {'margin': {'l': 10, 'r': 10, 'b': 10, 't': 5}. The margins, unlike the width and height, don’t scale when their viewport gets smaller - they remain fixed in size

5

Thanks that works! How can I make the titles appear closer to the pie charts themselves?