Subplot titles

[danydjedocr]

I have 3 subplots that are synchronized by sharing their XAxis. I want to add a title for each of the subplots like this :

See this pen : https://codepen.io/anon/pen/mKpNvO

[etpinard]

Hmm. I think someone already opened an issue about this, but I can't find it.

Related to #2274 and #977

[etpinard]

As a workaround, this can be done using layout annotations:

https://plot.ly/javascript/text-and-annotations/#paper-referenced-annotations

[etpinard]

also related to #233

[timini]

Annotations not working for subtitle

[alexsax]

@etpinard Is there a way to ensure the titles are centered above their subplots, using layout annotations? I can't find a good way to keep the titles centered for screens of different sizes. It would also be great to do this in a responsive way.

Subplots with titles seems like a common use case, so I'm sure that this feature must be implemented somewhere!

[JivanRoquet]

There are no words to describe how awkward the "easy" paper-referenced annotations solution is for achieving the simple and common task which is giving titles to subplots.

Especially when you want each title to be precisely centered along its own subplot (apparently there is no way do to this without manually calculating the global x value for each of them, taking the gap between subplots into account, etc).

Basically, subplots allow to get rid of complex and cumbersome calculations to get the positioning of the x/y axis elements right. If you dare want to add titles to your subplots (which is the case for, I don't know, let's say 80% of the time?), then these calculations are back again just for the sake of the titles, and in a much weirder way even (because of the borders, gaps, etc, that have to be take in to account).

As @alexsax puts it, subplots with titles seem like a common use case, so maybe this would be a good candidate to simply "give suplots a title" before implementing some weird complicated edge case stuff that 0.0001% of users will ever need, like, pointing an annotated arrow to a bubble in a 3d-spheres chart so that the arrow dynamically follows the rotation of the whole chart...

[JivanRoquet]

Update: it looks like there really is no way to center the title on its own subplot, as @alexsas puts it.

Providing a xref: 'subplot' option would solve this issue, like the following:

annotations: [
  {
    xref: 'subplot',
    subplot: [0],
    x: 0.5,
    xanchor: 'middle',
    text: 'I am centered on the first subplot'
  },
  {
    xref: 'subplot',
    subplot: [1],
    x: 0.5,
    xanchor: 'middle',
    text: 'I am centered on the second subplot'
  },
]

[mjh7]

I agree this kind of thing is lacking in subplots - I'm new to plotly and after I saw how powerful it is I created a many-part subplot assuming subplot titling and legends would be easy, but when I got to that I went on a bit of a goose chase trying to figure it out.

For now, the solution that is working for me (also based on annotations) makes use of the "domain"-splitting that happens when calling make_subplots. In python, I'm populating my subplots in a loop (starting at i=1) and using 'paper' anchors. My subplots only have one column, but you could do the same thing for getting the bottom position of a subplot using .domain[0] or the left/right using the corresponding xaxis attributes. Here are the most relevant lines within the loop:

max_pos = fig['layout']['yaxis' + str(i)].domain[1]
annotations.append({'text': idx, 'xref': 'paper', 'yref': 'paper', 'x': .5, 'y': max_pos, 'xanchor': 'center', 'yanchor': 'bottom', 'showarrow': False, 'font': dict(size = 22)}

...and then after end of loop:

fig['layout'].update(height = 5000, width = 1000, title='Your Title Here', annotations=annotations)

[kierenj]

This would be super incredibly massively turbo extra useful for our project

Edit: @etpinard if you could explain what you mean by easy please - how do I make a paper-referenced annotation relative to subplot #3, for instance? I have a vertically-stacked list of "N" subplots, different Y axis for each. thank you

My issue: if I use paper, it's not relative to the axis I want. If I use the axis, the axis is extended to cover the annotation: I don't want that, I want to have text above the axis

This is what I've done elsewhere: it's so hacky!

annotations: plots.map((p, i) => ({
              text: p.title,
              showarrow: false,
              xref: "paper",
              yref: "paper",
              xanchor: "center",
              yanchor: "center",
              x: 0.5,
              y: (1 - i / plots.length) * 1.1 - 0.06
            }))

For this one I had to avoid the final shared x axis too:

{
                    text: text,
                    font: {
                      color: "#707070"
                    },
                    showarrow: false,
                    xref: "paper",
                    yref: "paper",
                    xanchor: "right",
                    yanchor: "top",
                    x: 1,
                    y:
                      (1 - (pi + 1) / plots.length) * 1.04 -
                      (pi == plots.length - 1 ? 0.02 : 0)
                  }

[umesh-timalsina]

I think there is a decent use case for most users to incorporate subplot titles, positioning etc... This will be a hassle if your plan to do something dynamic with plotly.js. Basically, you will be left to do all your calculations. For example, how many rows you want to have/ how many columns, how would you space your sub plots. Is the spacing going to be enough? The easy solution would be to create multiple Plotly.js Plots one for each subplot. This should be supported by plotly.js IMO.