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

Subplot title alignment

How can I align the titles of each subplots to left?

@nyahua

If we define these subplots:

from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(
    rows=2, cols=2, subplot_titles=('title 1', 'title 2', 'title 3','title 4'),
    specs=[[{"type": "xy"}, {"type": "polar"}],
           [{"type": "domain"}, {"type": "xy"}]],
)

fig.add_trace(go.Bar(y=[2, 3, 1]),
              row=1, col=1)

fig.add_trace(go.Barpolar(theta=[0, 45, 90], r=[2, 3, 1]),
              row=1, col=2)

fig.add_trace(go.Pie(values=[2, 3, 1]),
              row=2, col=1)

fig.add_trace(go.Scatter(x=[2, 3, 1], y=[0.5, 1, 2], mode="lines"),
              row=2, col=2)

fig.update_layout(height=700, showlegend=False)
fig.show()

then we can change the subplot title positions after inspecting the fig.layout

Layout({
    'annotations': [{'font': {'size': 16},
                     'showarrow': False,
                     'text': 'title 1',
                     'x': 0.225,
                     'xanchor': 'center',
                     'xref': 'paper',
                     'y': 1.0,
                     'yanchor': 'bottom',
                     'yref': 'paper'},
                    {'font': {'size': 16},
                     'showarrow': False,
                     'text': 'title 2',
                     'x': 0.775,
                     'xanchor': 'center',
                     'xref': 'paper',
                     'y': 1.0,
                     'yanchor': 'bottom',
                     'yref': 'paper'},
                    {'font': {'size': 16},
                     'showarrow': False,
                     'text': 'title 3',
                     'x': 0.225,
                     'xanchor': 'center',
                     'xref': 'paper',
                     'y': 0.375,
                     'yanchor': 'bottom',
                     'yref': 'paper'},
                    {'font': {'size': 16},
                     'showarrow': False,
                     'text': 'title 4',
                     'x': 0.775,
                     'xanchor': 'center',
                     'xref': 'paper',
                     'y': 0.375,
                     'yanchor': 'bottom',
                     'yref': 'paper'}],
    'template': '...',
    'xaxis': {'anchor': 'y', 'domain': [0.0, 0.45]},
    'xaxis2': {'anchor': 'y2', 'domain': [0.55, 1.0]},
    'xaxis3': {'anchor': 'y3', 'domain': [0.0, 0.45]},
    'xaxis4': {'anchor': 'y4', 'domain': [0.55, 1.0]},
    'yaxis': {'anchor': 'x', 'domain': [0.625, 1.0]},
    'yaxis2': {'anchor': 'x2', 'domain': [0.625, 1.0]},
    'yaxis3': {'anchor': 'x3', 'domain': [0.0, 0.375]},
    'yaxis4': {'anchor': 'x4', 'domain': [0.0, 0.375]}
})

We have 4 annotations, one for each subplot, that define the title position. Hence we have to update the x-coordinate of each text that defines the title. Looking at the xaxis['domain'] for each subplot cell, we deduce the leftmost position for titles: x=0, 0.55, 0, 0.55. If you are not satisfied with the new title position, choose by trial and error a suitable x for each cell:

fig.layout.annotations[0].update(x=0.025)
fig.layout.annotations[2].update(x=0.025)
fig.layout.annotations[1].update(x=0.575)
fig.layout.annotations[3].update(x=0.575)