How can I implement a rectangular selection shape on my scatter plot?


I’m playing around with this codepen example of a plotly.js scatter plot with lasso selection ability. I’m wondering how this can be modified to use a rectangular selection shape instead of a lasso. Also, individual point selection (i.e. user clicks on a point and it is selected).

Does anyone know how this can be done?

Thank you!

Hi @gibran.shah not sure if I understand you correctly.

Did you see the box select icon? This is for selecting with a rectangle.

Ah, I see.

Too much time spent looking at the code and not enough the UI :slight_smile:

However, I’m not seeing an option for selecting individual points. Can that option be made available?

Thanks for your help so far.

I’m not sure if there is a builtin function for that.

I havn’t found it here:


I found this example:

The strange thing is it doesn’t work when I carry it over to the original codepen example. All I do is copy the ‘plotly_click’ handler over and replace ‘myPlot’ with ‘graphDiv’, but then when I click on the chart, the console says ‘Error’.

I’ve been exploring the fantastic world of Plotly.js and came across a fascinating example of a scatter plot with lasso selection capability on CodePen. I’m now facing a challenge and could use your expertise. I’d like to tweak the code to allow for rectangular selection instead of the lasso shape. I want users to be able to draw a rectangular selection area to choose points. I’m also interested in enabling individual point selection, meaning when a user click on a specific point, it gets selected. Regards