Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Box Select Customization

I’m trying to customize the box selection a little more than is currently available.

  1. Instead of changing the marker color within the selection, I’m looking to give the outline of each box selection a different color.
  2. I want to add an icon indicating the ability to remove that specific selection instead of just clicking on the plot to remove all the selections.

As for 1, I’ve tried accessing the paths with their classes and changing the color, but I’m unable to keep the selection color on zoom (the selection stays, but the styles disappear). See codepen.

I haven’t yet gotten to 2 yet since I’m not quite sure the best way to manipulate these paths.

What is the best way to access these paths and manipulate their CSS?

Appreciate your help!

–Chiara

I think you can solve 1) by swapping plotly_selected by plotly_selecting

Now for 2), I think you’re looking for something like https://codepen.io/etpinard/pen/gebrKz?editors=1010

You might be interested in subscribing to https://github.com/plotly/plotly.js/issues/1848 - which has some info on potential future development.

Re: 1. In your codepen, the selection outline still disappears on zooming, unfortunately. Also, as it stands now, I don’t think I’d be able to give each selection an individual color because any additional selections are appended to the initial selection path instead of being their own individual paths. I’m going to play around with this to see if I can append styles to certain parts of the path (although, I think I’m being overly simplistic/optimistic with that one).
Re: 2. It still removes all selections instead of individual selections.

I did see that issue and am definitely keeping a close eye on it.

Thank you!

Just out of curiosity, did you manage to find a workaround for your 1) situation since I’m currently stuck trying to do the same thing (different stroke colors for selections)? Thanks in advance!

@mvelebit, sorry for the late reply.

I ended up using the bounds of the user selection (data.range) to append a box shape to the plot.

The thing I have not fixed yet is getting the marker opacity back to it’s original state after selection (ie without the user having to double click on the plot). So, when I get that part working, I’ll update. If you find something before me, would love to know!

Let me know if you need any clarification on this.

Chiara