How do I control the selection box or lasso in plotly react?

user_1439748 0
Viewed 141

I'm using the basic <Plot/> component from react-plotly.js and I know how to get selection box points or lasso points from the PlotSelectionEvent param when the Plot performs an onSelected event

selection box

lasso

...but I cannot find where to set selection box points or lasso points in the Plot via a controllable prop.

Suppose I wanted to capture these selection box or lasso coordinate points and later on if the user clicks a button, I restore that selection box or lasso's location. How could I do that?

I see in the advanced docs you can control the layout, frames, data, and config, but what about selection box or lasso?

plotly.js plotly typescript
1 Answers

You can set the selected points by setting the selectedpoints attribute of your scatter trace, see https://plotly.com/javascript/reference/scatter/#scatter-selectedpoints. Example:

const data = [
  {
    x: [1, 2, 3, 4],
    y: [10, 15, 13, 17],
    mode: 'markers',
    type: 'scatter',
    selectedpoints: [1, 3]
  }
]

would programmatically select the second and the fourth point.

selectedpoints has to be an array of indices, not x and y coordinates. You should be able to get the indices of your selected points from the onSelected event.

user_99083110
Related