HTML Tags and Inline CSS that Work In Plotly.js Title

When we create a plot object with Plotly.js, we throw in 3 basic parameters in the Plotly object which are the plot container id, data and layout, like this one:

Plotly.newPlot('myDiv', data, layout);

And in the layont object, there is a property, called title. The title property can be defined with an string, which will simply be just the title text that is going to display on the top of the plot.

 I want to style my chart title when I use Plotly.js.;

var layout = {
  title:`Plot Title`
}

Or in the text object within the title property.

var layout = {
  title:{text:`Plot Title`}
}

Plot;y'js has some built-in title properties which we can use to style the title, sush as font color, family, size, padding, and position with x or y.

var layout = {
  title: {
    text:'Plot Title',
    font: {
      family: 'Courier New, monospace',
      size: 24
    },
    xref: 'paper',
    x: 0.05,
  }
};

Problems

But I want to add a HTML tag around the title so that I can have more flexibility with styling

I found out the <div> tag does not parse as HTML element in the title, It will just show <div>some title</div> as the title, like this one below.

HTML Tags and Inline CSS that Work In Plotly.js Title

After some trials and errors, I found some HTML tags and inline CSS that actually work. 

HTML Tags

1. <b> tag.
2. </i> tag.
3. <br> tag.
4. <span> tag.
5. <a> tag, which will not work.

Inline CSS that Works in the Above Tags

1. color.
2. display.

Conclusion

The HTML tag that I use most frequently in the Plotly.js title is the <br> tag, for which I use to break a long title into two lines.

title:`A Very Long Title that We Might
 Want to Break Into Two Lines`