React Plotly: How to share zoom state across multiple subplots

Question

I am using react-plotly.js in my application and it appears that documentation is scarce on how to configure a shared x-axis across multiple subplots and am wondering if others have found success in configuring the <Plot /> to get that outcome.

In my case I have 3 subplots stacked vertically. I am looking for the outcome where, when I zoom in on one of the subplots, the others will be zoomed in as well at the same scale.

Here are some snippets of code that I have:

import Plot from "react-plotly.js";

function MyComponent() {

  const layout = useMemo(
    (): Partial<Plotly.Layout> => ({
      grid: { rows: 3, columns: 1, pattern: "independent", subplots: ["xy", "x2y2", "x3y3"] },
      autosize: true,
      xaxis: { anchor: "y", domain: [0, 0.99], showticklabels: false },
      xaxis2: { anchor: "y2", domain: [0, 0.99], showticklabels: false },
      xaxis3: {
        anchor: "y3",
        domain: [0, 0.99],
        showticklabels: true,
        title: {
          text: "Time",
          font: {
            size: 16,
          },
        },
      },
      yaxis: {
        anchor: "x",
        domain: [0.67, 0.93],
      },
      yaxis2: {
        anchor: "x2",
        domain: [0.33, 0.59],
      },
      yaxis3: {
        anchor: "x3",
        domain: [0, 0.26],
      },

      margin: {
        t: 15,
        b: 75,
        l: 80,
      },
      legend: {
        x: 1,
        y: 0.5,
      }
    }), []
  );

  return (
    <Plot layout={layout} config={{ autosizable: true }} data={[...]} />
  )

}

Hoping someone has managed to get this working and can share insight.

Answer 1

You need to set a matches (or scaleanchor) constraint on the axes, eg. to link the x axes :

const layout = useMemo(
  (): Partial<Plotly.Layout> => ({
    grid: { rows: 3, columns: 1, pattern: "independent", subplots: ["xy", "x2y2", "x3y3"] },
    autosize: true,
    xaxis: { anchor: "y", matches: 'x3', domain: [0, 0.99], showticklabels: false },
    xaxis2: { anchor: "y2", matches: 'x3', domain: [0, 0.99], showticklabels: false },
    xaxis3: {
      anchor: "y3",
      domain: [0, 0.99],
      showticklabels: true,
      title: {
        text: "Time",
        font: {
          size: 16,
        },
      },
    },
    // ...
  }), []
);