Are there any supports in react-plotly to enable multiple charts to sync together. Fo

Support Synchronizing of zoom & hover for multiple charts on the same page about react-plotly.js HOT 2 OPEN

un-poco commented on June 5, 2024 2

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

from react-plotly.js.

Comments (2)

MatteoGioioso commented on June 5, 2024 1

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

from react-plotly.js.

AnurupMondal commented on June 5, 2024

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 ?

from react-plotly.js.

Recommend Projects