Chart legend selection state

It would be handy to know which legends are selected in the chart.

For example, a tree of one-to-many data that I'd like to chart. In my case, it's attribution data (source, campaign, success action). I'd like to show the high-level metric in the first chart (source, like: newsletter, search, share). When a user selects the legend for one of the traces, a second chart appears with the campaigns for that source ("bogo", "referral", "discount").

Plotly has support for this information, and the execution would look something like this:

chart.addEventListener('plotly_legendclick', (data) => {
  const { fullData } = data;
  const selectedTraces = fullData.some((trace) => trace.visible == true);
  // Assign selectedTraces to component state

Alternatively, this could be exposed as a component event handler, similar to Select and Clear.

Bonus points: it would be nice to have a simple toggle that defines the legend.itemclick layout config value so that it's easy to change the legend click action from hiding the clicked legend ("toggle") to selecting it ("toggleothers"). (documentation)

Thank you for sharing this detailed request, @jgillick We're tracking requests for this type of feature internally so I added your feedback there as well! I'll post back here if our team is able to ship a solution :slightly_smiling_face: