Plotting 3 pie charts side-by-side using the domain property

Question

I am trying to plot 3 pie charts side by side. I don't understand why the following code is making the pie charts go across the page diagonally left to write rather than horizontally left to write in one line.

Here's my code:

app.layout = html.Div([
    html.Div([
        dcc.Graph(id='TPiePlot',
                  figure={
                      'data': [go.Pie(labels=labels1,
                                      values=values1,
                                      marker=dict(colors=colors, line=dict(color='#fff', width=1)),
                                      hoverinfo='label+value+percent', textinfo='value',
                                      domain={'x': [0, .25], 'y': [0, 1]}
                                      )
                               ],
                      'layout': go.Layout(title='T',
                                          autosize=True
                                          )
                  }
                  ),
        dcc.Graph(id='RPiePlot',
                  figure={
                      'data': [go.Pie(labels=labels2,
                                      values=values2,
                                      marker=dict(colors=colors, line=dict(color='#fff', width=1)),
                                      hoverinfo='label+value+percent', textinfo='value',
                                      domain={'x': [0.30, .55], 'y': [0, 1]}
                                      )
                               ],
                      'layout': go.Layout(title='R',
                                          autosize=True
                                          )
                  }
                  ),

        dcc.Graph(id='RoPiePlot', 
                  figure={
                      'data': [go.Pie(labels=labels3,
                                      values=values3,
                                      marker=dict(colors=colors, line=dict(color='#fff', width=1)),
                                      hoverinfo='label+value+percent', textinfo='value',
                                      domain={'x': [0.60, 0.85], 'y': [0, 1]}
                                      )
                               ],
                      'layout': go.Layout(title='Ro',
                                          autosize=True
                                          )
                  }
                  )
    ])
])

Here is what's happening with option 1 from accepted answer (which is the one I need to go with). I'm getting three different sizes plus legend covering some of the pie chart:

I'm struggling to understand how to re-size dash graphs using CSS because the whole container increases in size rather than the actual graph and I don't know how to target just the graphs themself to make size bigger. Is there a way around this?

Answer 1

Plotly's domain is used for subplots. In your case you are plotting three individual plots one after the other and for each you are setting the domain separately.

You have at least two options:

1. Use the approach you are using now, ie 3 individual plots, and use CSS to define their position
2. Create one plot with three figures and use domain to adjust their position.

Option 1

import dash
import flask
import dash_html_components as html
import plotly.graph_objs as go
import dash_core_components as dcc

server = flask.Flask('app')
app = dash.Dash('app', server=server,
                external_stylesheets=['https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'])

labels = [['monkeys', 'elephants'],
          ['birds', 'dinosaurs'],
          ['unicorns', 'giraffes']]

values = [[50, 40],
          [100, 10],
          [100, 20]]

data = []

for label, value in zip(labels, values):
    data.append(html.Div([dcc.Graph(figure={'data': [go.Pie(labels=label,
                                                            values=value,
                                                            hoverinfo='label+value+percent', textinfo='value'
                                                            )]})
                          ], className='col-sm-4'))

app.layout = html.Div(data, className='row')

app.run_server()

Option 2

import dash
import flask
import dash_html_components as html
import plotly.graph_objs as go
import dash_core_components as dcc

server = flask.Flask('app')
app = dash.Dash('app', server=server)

labels = [['monkeys', 'elephants'],
          ['birds', 'dinosaurs'],
          ['unicorns', 'giraffes']]

values = [[50, 40],
          [100, 10],
          [100, 20]]

data = []
x1 = 0
x2 = 0.25
for label, value in zip(labels, values):
    data.append(go.Pie(labels=label,
                       values=value,
                       hoverinfo='label+value+percent', textinfo='value',
                       domain={'x': [x1, x2], 'y': [0, 1]}
                                      )
                )
    x1 = x1 + 0.30
    x2 = x1 + 0.25



app.layout = html.Div([
    html.Div([dcc.Graph(figure={'data': data})])
])


app.run_server()