How to disable legend click events?

Dash Python
1

Hi,

I have been reading about plotly.js ability to disable legend click events here Disable legend click functionality (hiding traces) and here https://plot.ly/javascript/plotlyjs-events/#legend-click-events. It feels like everything I need to know is there, but I can’t figure out how to translate this to dash. I must be missing something really simple.

In particular, I would like to legend disable single click events or legend double click events. It seems that this might be achieved by layout[‘legend’][‘uirevision’], but I haven’t been able to get that to work either. I’m working with ScatterGeo traces, and have tried:

layout=dict(
    legend=dict(
        uirevision=False
    )
)

Versions:

plotly.__version__
'3.7.1'

dash.__version__
'0.40.0'

dcc.__version__
'0.45.0'

Any help is greatly appreciated!

2

Not sure if this is an ideal solution, but one alternative, if you don’t want any legend functionallity, is to just create an annotation. This would also have the benefit of increased flexibility since you aren’t just constrained to the trace name for the labels.

3

It’s not a bad idea, but it seems like functionality is out there to disable the legend click events. I just can’t figure it out :slight_smile:

4

Hmm, I don’t actually see a clean way to do this in Dash right now. You’d need custom js that looks for new graphs and calls gd.on('plotly_legendclick', () => false) on them. Sounds ugly and finicky. We have a longstanding issue about this, that just hasn’t bubbled up to the top of the queue https://github.com/plotly/plotly.js/issues/665

5

Thanks @alexcjohnson, I had been following that github issue. Agreed, the js solution while possible, isn’t exactly trivial to implement. I’ll keep an eye on the github issue, maybe this is something I can contribute to.

6

@drwx, have you tried the pure css approach that was in that issue?

7

I did not, thanks for point this out!

8

this custom.css works for me:

  .legendtoggle {
    cursor: default;
    pointer-events: none; 
  }