How to create new line in Plot.ly JS title

Question

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):

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 1

Use <br> to break lines in plotly strings.

Solution 2

To have more control, I'm doing like this for multiple-lines title:

multipleStringLines: (title) => {
    if (title.length > 20) { // check if greater than threshold!
                let y_axis = title.split(' ');    //break into words
                let interval = title.split(' ').length / 2;     //2-lines
                return y_axis.slice(0, interval).join(' ') + '<br>' + y_axis.slice(interval, y_axis.length).join(' ');
    }
     return title;
}

Comments

[Frank Corso]

Ah, here I was trying \n and \r and various other things and never once tried the basic HTML. That worked. Thanks!

[jjrr]

@M.A. do you know if this is supposed to work also in 3d plots? (you need usually the axis within the scene environment ) – it is not working in my case – thanks! (I am actually working in python)

[Nicholas Porter]

Just a heads up <br /> does not work. Must be <br>

[danday74]

Does this answer the question?

[Adnan Boota]

the main-answer is <br>, but this is just my personal-approach to handle multiple-lines of title.