Make auto-margin step dependent on axis label span

[mnoble01]

Hi there, I have some graphs with particularly long labels/axis string values and I'm wondering if there's a way to get them to fit without changing the layout.margin option because I'm using dynamic data.

Here's CodePen showing a longer label being cut off on both a vertically and horizontally-oriented bar chart - http://codepen.io/mnoble01/pen/zqxZQx.

[etpinard]

There's no automated way to do that at the moment. Making the auto-margin step dive into the axis labels would be a great addition though.

Renaming this issue accordingly.

[aleburato]

Hi guys, adding my +1 to this... Please remember to take Pies into account as well :)

[bextra]

+1 from me too

[gracecarey]

+1

[tilleryj]

+1

[druvisc]

+1

[ghost]

+1

[edwardbetan]

+1

[donnyv]

+1

[brian428]

+1

[hy9be]

+1

[bpaszcza]

+1

[mariehooper]

+1

[aaneitchik]

+1

[ghost]

Little workarround:

You can calculate the needed margins for your layout out of the SVG:

 function calculateLegendMargins(containingElement){
      var refBB = $(containingElement).find(".gridlayer")[0].getBBox();
      var legendContainingBB = $(containingElement).find(".plot")[0].getBBox();
      var legendBB = $(containingElement).find(".xaxislayer")[0].getBBox();

      var margin = {};
      margin.b = legendBB.height;
      margin.r = (legendBB.width+legendBB.x+legendContainingBB.x) - (refBB.width+refBB.x);
      return margin;
} 

The Plot will "jump" on pageload, but the legends should be in place.
Only working with Plotly v1.24.2, only tested with single bar plot.

Use the function with:

Plotly.plot(targetDiv,data,layout).then( function() {
  layout.margin = calculateLegendMargins(targetDiv);
  Plotly.relayout(targetDiv,layout);
});

Please also let me know if it worked for you and or your improvement suggestions! Thanks.

[ghost]

If someone needs it for Plotly 1.17.2:

function calculateLegendMargins(containingElement){
              var widestTick = Math.max.apply(Math,$.map($(containingElement).find(".xtick"),function(elem){
                return elem.getBBox().x + elem.getBBox().width
              }));
              var highestTick = Math.max.apply(Math,$.map($(containingElement).find(".xtick"),function(elem){
                return elem.getBBox().height
              }));

              var refBox = $(containingElement).find(".xtick").last();
              var legendContainingBB = refBox.parent()[0].getBBox();
              var refBB = refBox.parent().parent().find("rect")[0].getBBox();

              var margin = {};
              margin.b = highestTick;
              margin.r = (widestTick+legendContainingBB.x) - (refBB.width);
              return margin;
            }

[cbailiss]

+1. Without a fix for this, a lot of the formatting and styling options are unusable.
PS. Thanks for the workaround, but would prefer a proper fix, i.e. to avoid the double render, to properly work with axis titles, to properly support Plotly for R, etc.

[ghost]

Workaround is by no means the solution, i agree. I'm just waiting for this already for half a year and used plotly on production site. It's more a desperate try to satisfy my customers and thought, one of you could maybe need it.
I'm still hoping there's a proper fix soon.

[dannycodes]

+1

[joepax]

+1

[brooksryba]

+1

[hy9be]

I gave it try to make a fix. My change helped a bit on couple of my simple test cases, for example.

Before:

After:

The code changes are only a proof of concept: hy9be@5f5ad4f

It would be great if @etpinard or any other admins could take a look and give some feedback to me.

[hy9be]

And I do not 100% sure about what the 3rd parameters of Plots.autoMargin means. For example for the legend for the case above, this parameter value is {x: 1.02, y: 1, l: 0, r: 88, b: 48, t: 0}. What does the fraction x and y mean here? And also what is the value for l(eft), r(ight), b(ottom), t(top) mean? The desired margins?

[etpinard]

What does the fraction x and y mean here?

That's the starting position in normalized plot coordinates (i.e. the same coordinate system we use to position e.g. legend)

[jackparmer]

Hey @hy9be - do you need any more help, suggestions, or feedback with this one? This looks promising!

[bewaiting4]

Hi @jackparmer I'm following @hy9be 's fix. would you be able to explain more about the "x", "y" here? Could you explain more details about the normalized plot coordinates? I'm asking because I have trouble understanding the algorithm in plots.doAutoMargin. BTW: According to my investigation, this is also a promising fix for #1504

[hy9be]

@jackparmer I did not get a chance to making further progress as I have similar confusion with @bewaiting4, about what "x" and "y" stands for in the Plots.autoMargin function. @etpinard explained a bit above but I failed to fully understand the whole picture behind even with his help.

Also if any one could add some comments for the core algorithm in plots.doAutoMargin: https://github.com/plotly/plotly.js/blob/master/src/plots/plots.js#L1331-L1364, I should be able to move forward.

[fabiangehring]

+1

[aaronryden]

+1

[roqe]

+1

[etpinard]

I'm getting a little tired of those _+1_s.

Locking this conversion until we start working on this (which should happen soon).

[nicolaskruchten]

I'm happy to report that this is now fixed, with the addition of the *axis.automargin attribute (see #2243). When set to true it will grow the plot margins so as to make room for both the tick labels and axis title :)

Some caveats: this doesn't interact with the legend's positioning, so tick labels can still conflict there, and for x-axes at the top, can conflict with the plot title, but it's a good start! Here's the mock that shows it in action: https://github.com/plotly/plotly.js/blob/master/test/image/baselines/long_axis_labels.png

[fcasarramona]

Nice.
It works for pie charts?

[etpinard]

Nice.
It works for pie charts?

Nop.

[nicolaskruchten]

Unfortunately it just works for 2d cartesian axes at the moment.

[fcasarramona]

May I open a new issue for pie charts?

[donnyv]

@etpinard @nicolaskruchten I bet you guys thought you were done with this. 😜

[etpinard]

Yep, we should probably 🔒 this thing again 😛

[nicolaskruchten]

I'm happy to field some comments here for a while :)

@fcasarramona please do create a new issue for whatever else you need... we won't track any additional work on this issue.

[fcasarramona]

It already exists the issue for pie charts since Dec, 2015, 😛 "Pie charts don't always seem to fit labels to a constrained space" #75

[sorenwacker]

Long tick labels still getting cut off - Automargin functionality for Python not working.

• plotly
• plotly=4.4.1=py_0
• plotly_express=0.4.1=py_0
  • django-plotly-dash==1.1.3

[nicolaskruchten]

Hi @soerendip ! If you're encountering automargin issues in Python, please create an issue in the Plotly.py repo and we'll take a look :) https://github.com/plotly/plotly.py/issues/new