Plotly.js: Add ability to disable legend trace toggling

[etpinard]

Some folks don't want it apparently; we should make this optional.

Maybe a boolean layout.legend.tracetoggle attribute?

[hectorip]

I have implemented it could you check it, please?

https://github.com/hectorip/plotly.js/pull/1

I have created a pull-request in my own fork as stated in the guidelines.
Thanks in advance.

[etpinard]

@hectorip you're off to a great start. I think that's all you need.

A couple recommendations before making your PR to the main repo:

• no need for that true in coerce('tracetoggle', true); In this case, the default value is static (i.e. it doesn't depend on other attributes).
• make sure npm run lint is clear of errors. I think you'll only need to remove that console.log
• Instead of adding an image baseline mock json, you should add a jasmine test that make sure that clicking on the legend items with tracetoggle: false doesn't do anything. See suite legend_test.js and legend_scroll_test.js for inspiration.

Thanks for your efforts :beers:

[john-soklaski]

@etpinard @hectorip What do you think about returning false from a callback to disable the default behavior?

I have a branch of plotly where I've added a plotly_legend_toggle event so I can know when to apply some custom scaling to the chart when a user toggles a trace.

It seems like there could be other uses for being able to influence the behavior of a toggle or react to it happening.

[etpinard]

What do you think about returning false from a callback to disable the default behavior?

We _could_, but the plotly.js data / layout API needs to be JSON serializable to ensure that all our API libraries have access to this feature.

@john-soklaski To treat the custom handler case, we would need a config option as proposed in https://github.com/plotly/plotly.js/issues/65 - which isn't at all incompatible with the legend.tracetoggle boolean attribute.

[john-soklaski]

@etpinard That makes sense, thanks. Glad to see it would still be a possibility :)

[tudor-sv]

I also had this need to disable trace toggling, but only for a particular trace, not for all.
I wanted to have like a "background trace" that would be displayed in the legend but be untogglable.
After digging around for hours in the plugin's js , I made an accidental discovery while inspecting the chart's svg dom elements: There is a special transparent element overlaying each trace in the legend (.legendtoggle). This element has the attached js click handler responsible for toggling the corresponding trace. By making this element unclickable, we circumvent the need for any new js hacks or changing the plugin api.
Here is the workaround, using only a few lines of css:
http://codepen.io/tudor-sv/pen/vXEZYG
Of course this method could also be used to make all legend items untogglable...

[dwinston]

I have a related issue. I don't want to disable legend trace toggling in general, but I'd like to include a hyperlink in my trace name so that a page with more detail on that trace can load. I am okay with the trace toggling on click anywhere not within my <a> element, but I want click events within <a> links to pass through and work as expected.

[daattali]

Any ETA on when this feature would be merged into plotly?

[etpinard]

Now doable using:

Plotly.newPlot('graph', {}).then(gd => {
  gd.on('plotly_legendclick', () => false}
})

I'll leave this ticket open, as something like https://github.com/hectorip/plotly.js/pull/1 could offer another viable of doing this.

[AllaSorokina]

Hi @etpinard,
thanks for fixing that.

I'm using reactjs wrapper for Plotly (import createPlotlyComponent from 'react-plotly.js/factory').

Unfortunately I cannot figure out what proper syntax should be in that case.

This phrase doesn't work:

const PlotlyReactComponent = createPlotlyComponent(Plotly). then(gd => { gd.on('plotly_legendclick', () => false); });

Will appreciate a lot your help!

[etpinard]

@AllaSorokina I'm no React expert, but something like

import React from 'react';
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);

class App extends React.Component {
  render() {
    return (
      <Plot
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            mode: 'lines+points',
            marker: {color: 'red'},
          },
          {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
        ]}
        layout={{width: 320, height: 240, title: 'A Fancy Plot'}}
        onLegendDoubleClick={() => false}}
      />
    );
  }
}

should work.

If it doesn't, please ask your question again on https://community.plot.ly/

[jacobq]

This seems to be possible now with the plotly_legendclick & plotly_legenddoubleclick event hooks by returning false from the custom event handler.
See https://stackoverflow.com/questions/51029619/what-is-the-right-way-to-override-default-event-handler-behaviors-e-g-toggle-t

[jacobq]

Seems like this issue can be closed now, per this comment, right?

[etpinard]

I chose not to in https://github.com/plotly/plotly.js/pull/2581

Add ability to disable legend trace toggling #665 (this PR adds a way, but it might be nice to add attributes for this so that the behavior can be exported)

[jacobq]

@etpinard OK, so this issue is really about providing a better way rather than simply making it possible. Fair enough

[RylanSchaeffer]

What's the current status of this functionality?