I have a number of traces that are displayed overtop each other. I would like to be able to send highlight some of them by clicking on the legend, with the others still being displayed in the background. I can install my own click handler for the legend that will highlight an individual trace by changing the color, as shown in this codepen, but the draw order results in the highlighted trace being behind many of the non-highlighted traces, whereas I would like it to be on top of everything.
I have found this stack overflow answer which gets most of the way there, but it has the side effect of rearranging the legend. Since the highlighting would be done by interacting with the legend, I feel that this rearrangement would be very confusing for a use.
Any suggestions would be appreciated.
The besttm way to bring a trace to the top would be using Plotly.moveTraces.
Now, we don’t expose an official way to attach custom event handlers to legend items, but some users have found workarounds. I invite to read https://github.com/plotly/plotly.js/issues/65
1 Like
Thank you for the suggestion.
I have modified the codepen example to include your suggestion, and the reference for custom event handlers on legend items. I can now click on a legend item and have it be brought to the front of the draw order. However, this has the side effect of reordering the legend as well, which I would like to avoid.
Is there a way to manage the draw order and the legend order separately? I have found layout.legend.traceorder, but it does not allow for arbitrary rearranging of the legend.
There’s none other than traceorder at the moment unfortunately.
Thank you. I was able to find a hacky workaround, where I draw an extra copy of the trace overtop the existing traces, with showlegend set to false. In case others are interested, this workaround is demonstrated here.