Charts hopping up/down because legends layout changes on hover

[0ff1ane]

Hi,

Sometimes the charts in the lower rows hop up and down because the legends of the upper charts change their layout/height

Attaching video recording

live_dashboard_before.mov

The issue seems to be in the uPlot css.
I added some custom css to fix it

/* Override uplot styles */
.u-series {
  th {
    /* Avoid legend title wrapping when data is shown for that row, changes the heights */
    text-wrap: nowrap;
  }
}

.u-inline {
  /* Avoid block for legends, leads to chart card size updates and hopping */
  display: flex;
  flex-direction: column;
}

Video recording with css fix

live_dashboard_after.mov

Is this the right way to do this?
I hope I'm not missing some obvious option that I could have used.

Thanks for the great library!

[josevalim]

Thank you! Perhaps this should be fixed in uplot itself? Or maybe it is already fixed and we need to update it.

[0ff1ane]

I upgraded to uPlot:1.6.32 in my phoenix_live_dashboard dev environment and the issue persisted.
Looking at their min.css, I don't see similar changes to the .u-series th parts.

They also seem to recommend overriding the .u-inline classes on one of their issues pages
leeoniya/uPlot#295 (comment)

[josevalim]

So please send a PR for these particular changes, thank you!

[0ff1ane]

Made one at #483