Legend click behaviour - legend item opacity

plotly.js
1

Hey,

By default when clicking on a legend item, its HTML element gets added a ‘style=“opacity: 0.5;”’ attribute. This is problematic when one trace is allocated the color black and another the color grey. When the first trace is deselected, both legend items then appear to have the same color.

My desire is to override this behaviour and replace it with a strikethough styling of the legend item. Any suggestions for how to accomplish this?

1 Like
2

I have some transparent markers, and the legend matches the marker transparency. When I click the legend items, their opacity is further reduced. I suspect the legend item opacity is halved when deactivating the trace, but I could not find the attribute. Can anyone confirm?

3

Use return false in the plotly_legendclick event to override the default behavior and right there in the event you can write code to do whatever you want to happen when clicking on the legend.

Or

  • itemclick
    Parent: layout.legend
    Type: enumerated , one of ( "toggle" | "toggleothers" | false )
    Default: "toggle" Determines the behavior on legend item click. “toggle” toggles the visibility of the item clicked on the graph. “toggleothers” makes the clicked item the sole visible item on the graph. “false” disables legend item click interactions.
  • itemdoubleclick
    Parent: layout.legend
    Type: enumerated , one of ( "toggle" | "toggleothers" | false )
    Default: "toggleothers" Determines the behavior on legend item double-click. “toggle” toggles the visibility of the item clicked on the graph. “toggleothers” makes the clicked item the sole visible item on the graph. “false” disables legend item double-click interactions.