Open un-poco opened 1 year ago
I have managed to somewhat sync the hover event on different plots:
import Plot from "react-plotly.js";
import Plotly from 'plotly.js-cartesian-dist-min'
const [plotRefsMap, setPlotRefsMap] = useState<{ [key: string]: any }>({})
<Plot
onInitialized={(figure, graphDiv) => {
setPlotRefsMap(prevState => ({
...prevState,
["yourChartName"]: graphDiv
}))
}}
data={...}
layout={...}
onHover={event => {
const pointNumber = event.points[0].pointNumber;
Object.keys(plotRefsMap).filter(key => key !== "yourChartName").forEach(key => {
Plotly.Fx.hover(plotRefsMap[key], [
{curveNumber: 0, pointNumber}
])
})
}}
onUnhover={event => {
Object.keys(plotRefsMap).filter(key => key !== "yourChartName").forEach(key => {
Plotly.Fx.hover(plotRefsMap[key], [])
})
}}
/>
I have managed to somewhat sync the hover event on different plots:
import Plot from "react-plotly.js"; import Plotly from 'plotly.js-cartesian-dist-min'
const [plotRefsMap, setPlotRefsMap] = useState<{ [key: string]: any }>({})
<Plot onInitialized={(figure, graphDiv) => { setPlotRefsMap(prevState => ({ ...prevState, ["yourChartName"]: graphDiv })) }} data={...} layout={...} onHover={event => { const pointNumber = event.points[0].pointNumber; Object.keys(plotRefsMap).filter(key => key !== "yourChartName").forEach(key => { Plotly.Fx.hover(plotRefsMap[key], [ {curveNumber: 0, pointNumber} ]) }) }} onUnhover={event => { Object.keys(plotRefsMap).filter(key => key !== "yourChartName").forEach(key => { Plotly.Fx.hover(plotRefsMap[key], []) }) }} />
how do i do this with react-plotly ?
Are there any supports in react-plotly to enable multiple charts to sync together. For example, I zoom in in one plot, and all the other plots on that page do the same zoom. Or I hover on a position of one plot, and other plots show the same kinds of hovering too.
Thanks!