Scrollbar sensitivity in plot legend skips curves

Dash Python
1

Hi!

I am a using a dcc.Graph in ny app to display around 100 curves in quite a small plot.
The legend can only show curves 1 to 13 so there is a scrollbar. However, when scrolling the slightest, it skips from 1-13 to 34-46 and then to 67-79 and so on, making it impossible to see certain curves in the legend.
The scrollbar handle can also be clicked and dragged to scroll more accurately, but since my dcc.Graph has the "edits" : "legendPosition" option, moving the handle also moves the legend a lot and it causes some bugs where the legend gets cropped.

I would also like to keep the legend moveable if possible.

Here is an example:

screen-capture (2)

There was a similar thread a few years ago but it got no answers: Adjusting legend scrolling sensitivity when there are many series

Thanks!

2

hi @tcharland13
I’m not sure there is a solution for that currently. But, can you share you code and data with us as a Minimal Reproducible Example.

3

The problem is not really linked to my specific data I believe, here is a generic example that showcases the issue:

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()
4

I think that this function should make sure that the target doesnt have the class of ‘scrollbar’.

5

Thank you @jinnyzor for the suggestion and thank you @tcharland13 for reporting this bug.

I created an issue for this bug.

1 Like
6

What should I do with this? Do I add the whole function as an external script to my app? Thanks

7

This will need to be a plotly adjustment to their code, until they adjust it, there isnt much that you can do.

1 Like