Etichette con spunta lunghe che vengono troncate nella tabella plotly.js

Question

E 'possibile dare più spazio per le etichette delle tacche in plotly.js? Le etichette lunghe nei miei grafici vengono tagliate.

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

non riesco a vedere come fare questo nel API for y-axes tick settings.

Data la natura dei miei grafici, ho bisogno di usare un orientamento orizzontale. Quindi una soluzione che non posso usare è un orientamento verticale con le zecche ruotate di 90 gradi.

Answer 1

È possibile regolare i margini dei grafici per ottenere un po 'più di spazio. Per esempio, cambiare:

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

a

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

si può leggere di più sulla regolazione dei margini qui: https://plot.ly/javascript/setting-graph-size/ e tuta da opzioni di layout qui: https://plot.ly/javascript/#layout-options

Answer 2

È anche possibile impostare il margine in modo dinamico, in base sulla lunghezza dell'etichetta:

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