Long tick labels getting cut off in plotly.js chart

plotly.js
1

How to fix this issue without setting margin for the graph. Is there something like setting the length of the tick labels, so that it will be dynamic for all.

2

Unfortunately, axis label lengths aren’t used in our auto-margin computations at the moment.

We are planning on adding that functionality (subscribe to https://github.com/plotly/plotly.js/issues/296 for the latest info).

3

Hello !

You can play with the layout margin function to move the margin of the graph and correctly read your labels:

Example. (in python)

yaxis=go.YAxis(
    title='Sample axe',
    showticklabels=True,
    showgrid=True,
    showaxeslabels=True,
    tickangle=0,
    tickfont=dict(
        family='Old Standard TT, serif',
        size=8,
        color='black'
    ),
    
),
margin=go.Margin(
    l=250,
    r=50
)
1 Like
4

that would be slick addition

for now I’m setting margin based on ticks length like this:

var maxLabelLength = d3.max(chartData, d => d.x.length);
const letterWidth = 7;
var layoutUpdate = {
    "margin.b": maxLabelLength * letterWidth
};
Plotly.relayout(div, layoutUpdate);

though it doesn’t look too good if you have only one long label placed horizontally, and all this big bottom margin, but you might use it before automargin comes along

1 Like
5

Note that this is supported now through automargin in xaxis and yaxis, that is: layout={xaxis: {automargin: true}, ,yaxis: {automargin: true}}. It only works for the cartesian chart types right now (pies and 3D plots aren’t supported yet).

2 Likes
6

Would be nice to have working examples instead of out-of-context code snippets.

7

-> https://plot.ly/javascript/setting-graph-size/#automatically-adjust-margins

8

It seems the automargin fails at around 60 characters (depending on whether it is a fixed-width font or not).

If you try the following:

<div id="myDiv" style="width: 100%; height: 500px;"></div>
  <script>
var data = [
  {
    x: ['Apples', 'Oranges', 'Watermelon', 'Pears'],
    y: [3, 2, 1, 4],
    type: 'bar'
  }
];
var layout = {
  autosize: false,
  width: 500,
  height: 500,
  yaxis: {
    title: 'Y-axis Title',
    ticktext: ['long label','Really, really, really, really, really, really, really, long label','3','label'],
    tickvals: [1, 2, 3, 4],
    tickmode: 'array',
    automargin: true,
    titlefont: { size:30 },
  },
  paper_bgcolor: '#7f7f7f',
  plot_bgcolor: '#c7c7c7'
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
  </script>

You get this:

image
image.png506×508 7.53 KB

Is there a way to increase the maximum limit on the automargin?

2 Likes
9

Here’s a working version: https://codepen.io/etpinard/pen/abopOGE?editors=1010

Here the length of the longest label is more than twice the graph’s width, so plotly.js omits it when computing the margins.

The current behaviour isn’t great. Adding a way to adjust the maximum auto margin size is not a bad idea. At the very least, we should log something when we omit a component from the auto-margin computations. Alternatively, we could instead of omitting the component, we could perhaps constraint it to the max value.

All in all, thanks for writing in! We’re hoping to improve this situation in future releases in the short term.

10

i have the same problem.

11

How about the 3d plots. Is it already available?

12

I’d like to see an elide option whereby the label is shortened with elipses, but on mouse hover shows the full text of the label. I can elide the labels myself but then hovering the labels or the point on the graph does not reveal the full text. I think this would be a very useful and relatively straihgtforward feature with something like number of characters to truncate to, a property like ’elide’: 10,