Default style can't handle responsive resize

[emilfihlman]

See minimal repro at https://emil.fi/p/uplotissue/

Something like:

*
{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body
{
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "plot" "footer";
}

and then handling resize

let resize=()=>{let box=plot.getBoundingClientRect(); uplot.setSize({width: box.width, height: box.height});};

and then resizing the page grows the uplot element unboundedly because the setSize is applied to an inner element, while there's still the legend etc which take space.

Please update styling or setSize so that the size given is for the element, or advise if this should be handled differently, thanks!

This is possibly fixable by either guaranteeing that the u-wrap class is singular, or giving that an id to check the size against, etc, but it's all pretty kludge to do like that.

setSize should be the size I want to give to the element, and uPlot should handle separating that for the plot area and the legends etc itself.

[forgo]

Can confirm this is problematic for us as well. I can make a well constructed resize observer to measure width/height of the responsive wrapping div and let uplot call setSize as needed; however, only the canvas element is affected. The divs with classes u-under and u-over do not update to reflect the latest dimensions.

In my case it ends up looking responsive-ish because the canvas is stretching and squishing, but there's a giant empty gap (almost half the height) at the bottom of the plot -- even with no legend.

I've been able to hack it with a negative -200 bottom padding in uPlot's options.padding, but I'm sure this has consequences for other uplot calculations.

[forgo]

Just a quick follow up:

Instead of negative padding, I can also add the arbitrary 200 to the height in the setSize call for a similar "hack" fix:

setSize({ width, height: height + 200 })

The 200 here is guess and check to get the x axis label align near the bottom of the container.

I'd feel much more comfortable if I knew where this missing approximate 200 pixels is coming from or accounting for? What is taking up that space by default?

It's not clear other than it being the height difference of canvas and the divs of u-over and u-under.

Shouldn't the default be more flush when the legend is not shown? There's something else going on besides margin for legend.

[forgo]

One more follow up...

The above is still a hack because now the canvas size is blowing out of the parent div, and covering other buttons on my page, making them non-interactive.

But it looks right, at the cost of being totally non workable.

Obviously there's some other dynamic internal delta going on that I can't account for.

I've pulled down uplot source and tried to narrow what's going on in setSize, but having trouble with what side effects there could be with the underlying calcPlotRect and calcAxesRects.

I've tried at different monitors and pixel resolution to see if it had to do with my Retina display at all, but I don't think that's the issue as the issue persisted in the same way.