Search code examples
javascriptchartstitleplotly

How to create new line in Plot.ly JS title

I am using the Plot.ly JS for graphs. The graphs are charting the answers given to certain questions in a survey. So, the title of the graph is the question itself which can get a little long. Right now, the title runs off the graph and is hidden as seen in the image below (can't embed images yet on Stack Overflow so it created a link to the image instead):

Plotly title example image

This is the code being called where values and labels are variables defined elsewhere:

var graph_data = [
    {
        values: values,
        labels: labels,
        type: 'pie'
    }
];
var layout = {
 title: 'How responsive has our support team been to your questions or concerns?'
};
Plotly.newPlot( chartID, graph_data, layout );

I tried adding new line characters into the string such as \r and \n and \r\n and it did not work. I also tried changing the CSS property of word-wrap and it did not work. Any advice to easily show the title on multiple lines in Plot.ly JS?

Solution

  • Use <br> to break lines in plotly strings.