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

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?

回答1:

Use <br> to break lines in plotly strings.

回答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;
}

来源：https://stackoverflow.com/questions/35185143/how-to-create-new-line-in-plot-ly-js-title

标签

javascript

charts

title

plotly