Lange Ticks werden in plotly.js chart abgeschnitten

Question

Ist es möglich, in plotly.js mehr Platz für Tick-Etiketten zu geben? Lange Etiketten in meinen Charts werden abgeschnitten.

HTML:

<div id="plot"></div> 

JavaScript:

var data = [{ 
    type: 'bar', 
    x: [20, 14, 23], 
    y: ['giraffes', 'orangutans', 'a looooooooong string'], 
    orientation: 'h' 
}]; 

var layout = { 
    title: 'Bar Chart' 
}; 

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

Ich kann nicht sehen, wie dies in der API for y-axes tick settings zu tun.

Angesichts der Art meiner Diagramme, muss ich eine horizontale Ausrichtung verwenden. Eine Lösung, die ich nicht verwenden kann, ist eine vertikale Ausrichtung mit Zecken, die um 90 Grad gedreht sind.

Answer 1

Sie können die Ränder von Plotdiagrammen anpassen, um mehr Platz zu schaffen. Zum Beispiel ändern:

var layout = { 
    title: 'Bar Chart' 
}; 

zu

var layout = { 
    title: 'Bar Chart', 
    margin:{ 
    l:200 
    } 
}; 

können Sie mehr über Einstellung Margen hier lesen: https://plot.ly/javascript/setting-graph-size/ und Gesamt-Layout-Optionen hier: https://plot.ly/javascript/#layout-options

Answer 2

Sie können auch festlegen Marge dynamisch, basierend auf Etikettenlänge:

var maxLabelLength = d3.max(data, d => d3.max(d.y, label => label.length)); 
const letterWidth = 7; 
var layout = { 
    title: 'Bar Chart', 
    margin:{ 
    l: maxLabelLength * letterWidth 
    } 
};