Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Expected legend is not selected/unselected in scatter plot with scroll bar

Hi
If number of traces are large such that scroll bar appears on the the legend bar then clicking behaviour is not working as expected.

Please see the codepen below.
https://codepen.io/quantumThinker/pen/PKGayq
Here if I try to select trace 13 then the scroll automatically goes to trace 20 and deselects it. This behaviour can be seen in the chrome. In IE however sometimes clicking on the legend doesn’t deselect or select the trace.

I can’t replicate.

Does this affect anyone else?

In Chrome sometimes it doesn’t happen. Also it happens for the very first time i.e. if you try to select trace 11 then trace 17 is selected. After that it works fine.

Hi, I facing the similar issue when I output my data through R shiny to google chrome.

The issue do not happen when I open it at Internet Explorer.

I however fixed the issue using a hack. In the afterPlot listener I am overriding the scrollBox drag. But with this hack you will need to hold the scrollbar to scroll it or you can use mouse scroll. But scroll by clicking anywhere else will not work.

var scrollBox = Plotly.d3.select(graph).selectAll(‘g.legend’).data([0]).selectAll(‘g.scrollbox’).data([0]);
scrollBox.on(’.drag’, null);

Same issue here, with a large number of traces. Keeps jerking around so takes 10 attempts to select the right trace. Using latest Chrome.

This is happening in Dash using default settings for dcc.Graph. Is there a hack to fix in Dash?