Support Synchronizing of zoom & hover for multiple charts on the same page

[un-poco]

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!

[MatteoGioioso]

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], [])
        })
    }}
/>

[AnurupMondal]

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 ?