Long label shortcuts are cropped in plotly.js graphics

Question

Can I provide more space for tick marks in plotly.js ? Long shortcuts in my charts are cropped.

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

I don’t see how to do this in the API for setting the y-axis checkbox .

Given the nature of my diagrams, I need to use horizontal orientation. Therefore, the solution I cannot use is vertical orientation with ticks rotated 90 degrees.

Answer 1

You can adjust the graph fields to give yourself more space. For example, change:

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

to

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

you can learn more about changing fields here: https://plot.ly/javascript/setting-graph-size/ and general layout options here: https://plot.ly/javascript/#layout-options

Answer 2

You can also set the margin dynamically based on the length of the label:

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