Propagate zoom to other charts

plotly.js
1

If I have multiple chars on the screen and zoom into one of these can I propagate the zoom event the rest of charts ad zoom them as well?

Thanks

2

Even I am having same requirement. Doesn’t find the appropriate answer !.

Tried with “plotly_relayout” event, to manually propagate the event. But chart is refreshed every 10 secs, which raising the same “plotly_relayout” event. So doesn’t able to differentiate those reload and zoom events.

Any solutions!.

3

Look into the event that the “plotly_relayout” gets. You will see that it is different when a user manually zooms in from chart’s initial render. Then you can decide whether you need to propagate the zoom or not.

4

currentTarget: line-chart.ng-isolate-scope
data: undefined
delegateTarget: line-chart.ng-isolate-scope
handleObj:
data: undefined
guid: 533
handler: ƒ (chartObj)
namespace: “”
needsContext: undefined
origType: “plotly_relayout”
selector: undefined
type: “plotly_relayout”
proto: Object
isTrigger: 3
jQuery111004142084070765042: true
namespace: “”
namespace_re: null
result: undefined
target: div.chart-display.ng-isolate-scope.js-plotly-plot
timeStamp: 1558033289190
type: “plotly_relayout”
proto: Object

Here the event object getting. Both the times it is same. Can you point me to the exact variable to look for !

5

How are you actually listening to plotly_relayout?

6

the same way :
myDiv.on(‘plotly_relayout’,
function(eventdata){
//eventdata
});

eventdata is different from the example https://codepen.io/plotly/pen/dogexw?editors=1011.
Below is the example response:
xaxis.range[0]: 11.30394922425952
xaxis.range[1]: 15.099435825105783

7

Actual zoom will provide 4 values in two ranges 2 values each. That’s how you know the chart was physically zoomed in.

8

With some reason, getting this large object is resulting as event object both the times data refresh and zoom-in. Any plotly version mismatch do u think ?.

So the differentiation of object’s properties count will be the key to say the event type ?, or another way add specific handling for only zoom-in !

9

Seems like you are providing a native JS! event. Here is how my event looks like.

1