plotly
Plot Subtitle
I was wondering if there is a way to add a plot subtitle in plotly. Sometimes it would be very important to be able to add extra information regarding the plot in a line below the main title. It would also be great if it would be possible to add this subtitle within a "subtitle" tag on the layout description of the plot. Something such as:
var layout = { -----title: 'Plot Title', -----subtitle: 'Plot Subtitle', -----xaxis: { ----------title: 'x Axis', ----------titlefont: { ----------family: 'Courier New, monospace', ----------size: 18, ----------color: '#7f7f7f' ----------} -----}, -----yaxis: { ----------title: 'y Axis', ----------titlefont: { ---------------family: 'Courier New, monospace', ---------------size: 18, ---------------color: '#7f7f7f' ---------------} -----} };
I have searched on internet and I couldn't find any way to implement this subtitle on plotly. Even though I couldn't find anything I could edit the source code loaded on my browser to insert a subtitle within the <text class="gtitle" ...> ... </text> by adding a <tspan style="..."> </span>. Even though this worked for the plot display then the "download plot as a png" option from the "modebar" of the plot was not capable to save this change in a picture.
I know this might be an enhancement, hopefully it is not hardcoding and it is easy to implement.
Thank you very much!
This is a good candidate for using annotations.
We are trying to keep plotly.js as lean as possible now, so it is unlikely we will add this feature unless many more users request it. That being said, we are always open to pull requests!
Thank you very much!
Alternatively, break a line with a
<br>
I think that combining <br> toghether with some <span> tags I can properly place the subtitle.
In plot there is already this feature, you have "main" and "sub"
https://www.statmethods.net/advgraphs/axes.html
I sum my vote also to have this feature in plotly!
https://help.plot.ly/how-to-add-annotations/
https://plot.ly/create/?fid=plotly2_demo:128
Simple Annotations Example for a SubTitle
layout = {
title: "My Title",
annotations: [{
text: "My SubTitle",
font: {
size: 13,
color: 'rgb(116, 101, 130)',
},
showarrow: false,
align: 'center',
x: 0.5,
y: 1,
xref: 'paper',
yref: 'paper',
}]
}
// Add it in when drawing your plotly, or relayout with it...
Or in the plot.ly tool set, go to Style > Notes > "+ Annotation" > Subtitle to get an example.
Note, that as the legend gets turned on or off, the annotations anchored to the paper, don't remain centered with the title.
If you have a long, multiline subtitle, consider using <br> in the middle of the text string, and to increase the layout.margin.t (top margin) to something larger.
... or add a <small> in our pseudo-html parser. For example,
'title.text': 'Plot title<br><small>Plot subtitle</small>'
cc @nicolaskruchten
... or add a
<small>in our pseudo-html parser. For example,'title.text': 'Plot title<br><small>Plot subtitle</small>'cc @nicolaskruchten
layout['title'] += "<br>" + subTitle; // work fine layout['title'] += "<br><small>" + subTitle + "</small>"; // don't work
@leonardotrp, I had the same issue. The small tag does not seem to work. I created a small subtitle by rendering with a break and using the allowed <sub> tag:
'layout': {
'title': 'Historical Emissions and Future Emission Budget for {} <br><sub>Source: @FlorianDRX</sub>'.format(selected_country) ,
'xaxis': {
'title': 'Year'
},
'yaxis': {
'title': 'National Emissions (Megatons CO2)'
},
},
Which renders the title as:
4 years since this issue was created, yet no solution? 😞
In my case all of the title manipulations (adding <br /> or <sub> tags) are not good, because I want to do comparison of series with different subtitles on the same graph.
The problem is that different title plots a new graph.
The current recommendation is to use <br> and then either <sub> or <span style="..."> to style the second line of your title.
This issue is currently not on our roadmap in the coming months but we would happily accept a pull request if someone wants to implement it, or we would accept sponsorship to accelerate its development.
I experimented with altering the value of y. then found the meaning of the xref setting. careful use of y values and font sizes should be able to generate multiple lines of annotation.
y: 1,
y>=1 positioned the annotation just above the plot area.
0>y<1 positioned the annotation within the plot area,
y<0 positioned annotation below the plot area.
trap for the unwary : annotation color matching plot color will make the annotation invisible.
https://plotly.com/javascript/reference/layout/#layout-title-xref
"Sets the container x refers to. "container" spans the entire width of the plot. "paper" refers to the width of the plotting area only"
I'm not clear if values other than 'paper' as possible for xref
layout = {
title: "My Title",
annotations: [{
text: "My SubTitle",
font: {
size: 13,
color: 'rgb(116, 101, 130)',
},
showarrow: false,
align: 'center',
x: 0.5,
y: 1,
xref: 'paper',
yref: 'paper',
}]
}
