plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

Scrollbar sensitivity in plot legend skips legend items

Open Coding-with-Adam opened this issue 2 years ago • 1 comments

Issue first reported on the forum.

When scrolling the legend with the mouse wheel, it skips certain legend items.

The scrollbar handle can also be clicked and dragged to scroll more accurately, but moving the handle also moves the legend a lot and it causes some bugs where the legend gets cropped.

MRE:

from dash import Dash, dcc
import plotly.graph_objects as go
import numpy as np

app = Dash(__name__)

def sine(x, w):
    return np.sin(x * w)

x = np.linspace(0, 2*np.pi, 1000)

app.layout = dcc.Graph(
    figure=go.Figure([go.Scatter(x=x, y=sine(x, i/20)) for i in range(100)]), 
    config={"editable": True}
)

if __name__ == '__main__':
    app.run()

legend

Possible solution: Bryan suggested that the following function should make sure that the target doesn't have the class of ‘scrollbar’.

The scrollbar class is associated with the legend scrollbar. When the user starts to drag this element, the Plotly chart is sending two commands, one to the whole legend element and the other is the default on the scrollbar. The chart shouldn't read the drag start on the scroll bar at all, but instead just return no change.

Coding-with-Adam avatar Sep 29 '23 17:09 Coding-with-Adam

any update on this ?

sametsoekel avatar Jan 26 '24 11:01 sametsoekel