Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
un-poco opened this issue Jul 25, 2023 · 1 comment

Comments

@un-poco
Copy link

un-poco commented Jul 25, 2023

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
Copy link

MatteoGioioso commented Oct 3, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants