Deselecting points on plotly click event

plotly.js
1

After selecintg points using lasso/box select if I click on another point the points remain selected. Is there a way to deselect points using a function in plotly.js?
I tried setting this.data[0].selectedpoints to null, however the points still remain selected on the chart.
Here is the codesandbox: https://codesandbox.io/s/vue-template-q4557 that you can see the behaviour.
Try selecting few points using box select and see that they remain selected after.

2

Hmm. Have you tried calling:

Plotly.restyle(/* id of your graph */, 'selectedpoints', null)
3

I have the same issue. I am using Plotly https://cdn.plot.ly/plotly-2.32.0.min.js

I am trying to deselect the lasso selection programmatically.

The following two approaches work in version 1.58.5:

Plotly.restyle(graphDiv, 'selectedpoints', null)

and

Plotly.restyle(graphDiv, {selectedpoints: [null]})

In the current versions 2.32.0 and 2.33.0 it does not work anymore.

Is there a new alternative?

4

5

Thank you for the solution! It works!

6

Hi,

I continued to test your solution. While the selection is removed the markers do not reverse to the original color.

When you select markers in Plotly with the lasso tool all markers outside the selection are dimmed. Through a doubleclick the markers are restored to their original color. While your solution removes the selection it does not restore the marker colors outside the selection like the doubleclick does.

I tried to restyle the markers with the original colors but somehow it does not work.

Do you know how to restore the original marker colors programmatically?

7

8

I found it.

// removes the lasso selection
Plotly.update(plotlyChart.value, {}, {selections: } as object)
// removes the lasso layer
Plotly.restyle(plotlyChart.value, {selectedpoints: [null]});

Thank you!