79630171

Date: 2025-05-20 09:39:49
Score: 0.5
Natty:
Report link

While trying to use the other solutions in this thread (none of them worked for me, the reason shown below), I accidentally discovered much simpler solution, which does not involve manually comparing the members of xaxis and yaxis layout to the parameters of the plotly_relayout event handler to avoid calling Plotly.relayout() recursively:

When multiple time-series plots are to be synchronized, they most probably use the same layout. @RMS, @ChrisG and others here indeed use objects named layout, layout1, layout2 with exactly the same content. When you use only one common layout object for all the plots-to-be-synchronized, it is not necessary to call Plotly.relayout() at all - it is sufficient to call Plotly.redraw() instead, which does not re-emit the plotly_relayout event, and thus does not cause the infinite recursion:

<div id="plot_0" class="plotly_container"></div>
<div id="plot_1" class="plotly_container"></div>
...

and then in javascript:

var layout = { /* common for all instances */
  xaxis: {
    autorange: true,
    type: 'date'
  },
  yaxis: {
    autorange: true,
    type: 'linear',
  },
};

Plotly.newPlot('plot_0', data0, layout);
Plotly.newPlot('plot_1', data1, layout);
...
/* plotly_relayout event handler */
document.querySelectorAll(".plotly_container").forEach((div) => {
        div.on('plotly_relayout', function() {
                document.querySelectorAll(".plotly_container")
                        .forEach((div) => { Plotly.redraw(div); } );
        })
});

The reason why the other solutions from this thread did not work for me was obviously that I used a common layout object for all the plots. When user selects a different zoom or whatever, this object gets updated, so in the event handler it has exactly the same data as the event handler parameter, and because of that none of my other plots got ever relayouted.

Reasons:
  • Blacklisted phrase (1): did not work
  • Whitelisted phrase (-1): worked for me
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @RMS
  • User mentioned (0): @ChrisG
  • Low reputation (1):
Posted by: user2889554