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="..."> . 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!

Alternatively, break a line with a  

Thank you very much!

Alternatively, break a line with a  

I think that combining   toghether with some  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   in the middle of the text string, and to increase the layout.margin.t (top margin) to something larger.

@nicolaskruchten

... or add a  in our pseudo-html parser. For example,

'title.text': 'Plot title<br><small>Plot subtitle</small>'

cc @nicolaskruchten

@nicolaskruchten

... or add a  in our pseudo-html parser. For example,
'title.text': 'Plot title Plot subtitle'
cc @nicolaskruchten

layout['title'] += " " + subTitle; // work fine
layout['title'] += " " + subTitle + ""; // don't work

@leonardotrp

@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  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   or  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   and then either  or  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',
  }]
}

Closing in favor of #6856 which is in development.

Navigation Menu

Repository navigation

Plot Subtitle #233

Simple Annotations Example for a SubTitle

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Plot Subtitle #233

Description

Activity

mdtusz commented on Feb 3, 2016

chriddyp commented on Feb 3, 2016

ifll commented on Feb 3, 2016

cyberosa commented on Oct 30, 2017

peteristhegreat commented on Mar 16, 2018

Simple Annotations Example for a SubTitle

etpinard commented on Dec 21, 2018

leonardotrp commented on Jun 29, 2019

floriandierickx commented on Oct 15, 2019

Tzahile commented on Jun 25, 2020

nicolaskruchten commented on Jun 25, 2020

aspiringguru commented on Aug 18, 2022

emilykl commented on May 17, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions