react-plotly.js
react-plotly.js copied to clipboard
plotly
onSelected event not being called
When selecting a region on the <Plot> the onSelected event is not firing. Other events such as onUpdate and onClick work.
Plot Component:
<Plot
onSelected={(data) => this.setTotalData(data)}
layout={layout}
useResizeHandler={true}
style={{ width: "100%", height: "100%" }}
data={data}
/>
Function to be called:
setTotalData = (data) => {
console.log("Selected Data: ", data)
}
@mnoster
"react": "^16.4.2",
"plotly.js": "^1.43.2",
"react-plotly.js": "^2.2.0"
and the usage:
import React, {Component} from 'react';
import Plot from 'react-plotly.js';
class TabPanelContent extends Component {
state = {
data: [],
layout: {}
};
....
onSelected = data => {
console.log(data, 'data');
}
render() {
return (
<div className="scatterplot-container">
<Plot
data={this.state.data}
layout={this.state.layout}
onSelected={data => this.onSelected(data)}
style={{width: "100%", height: "50%"}}
useResizeHandler={true}
/>
</div>
);
}
}
export default TabPanelContent;
I want to use onSelected and onClick both the events for the plot. If i use that, even for the click, it is going to onSelected, How to use onSelected and onClick events.
@mnoster you are using the event prop correctly. I might know where your confusion lays:
To properly use the onSelected prop, you should select 'Box Select' or 'lasso Select' from the options on the plotly chart. The default selection is for zooming.
