Hover window gets cropped on top

[q-wertz]

Not sure if that belongs here or in plotly.js…

Summary

When creating a plot with lots of traces and enabling the hover information it gets cropped (at the top).

Reproducible Code Example

import plotly.express as px
import numpy as np

x = np.linspace(0.0, 19.0, 20)
y = []
for i in range(10):
    y.append(np.ones(shape=(20))*i)

fig = px.line(x=x, 
              y=y,
              height=300)
fig.update_layout(hovermode="x unified")

fig.show()

Steps To Reproduce

1. Run python test.py
2. Hover in the plotly graph

Expected Behavior

The hover window is an overlay and not cropped.

Moved here from: streamlit/streamlit#5764

[AaronStiff]

Not sure if this should be considered a bug, or just a natural result of having so many traces with that much hover information. Even if you could squish it all in there, it wouldn't probably wouldn't be very readable . :)

But an easy workaround would be to increase height to at least 700.

[q-wertz]

I would consider it a bug as it is quite counterintuitive to just crop the hover window on top.

A nice feature would be if it is would be scrollable.

[nicolaskruchten]

This is awkward indeed but Plotly.js never allows its contents to overspill the containing div, and since the hoverlabels are not persistent, there's no way to give them focus to make them scrollable.

I don't think we should really consider this a priority because, to be frank, this kind of super-tall hoverlabel that would require scrolling is not really a very usable system for users. I would recommend modifying the hovertemplate to make each block shorter/wider or to remove some extraneous information, for example the X value which is duplicated in each block.

[secretwpn]

@nicolaskruchten allow me to disagree. Sometimes a plot can have quite small height, but have multiple traces.

Then even if amount of hover information per trace is minimal - the height of the hover box will exceed the height of plot container.

In this example we lose the whole (blue) trace worth of info from the hover box.

Perhaps if not fixing, providing a CSS workaround of sorts could be quite helpful for people struggling with such edge cases.

This little custom CSS helped in my case

.js-plotly-plot,
.main-svg 
{
  overflow: visible !important;
}