Horizontal zoom across multiple graphs

plotly.js
1

Hello everyone,

Does horizontal zoom effect multiple graphs? I find that vertical zoom works as intended. However, as you can see I zoomed in middle graph horizontally and that’s only one affected. Is there an attribute I can set? Thanks.

ZOOM ALL

zoom_all
zoom_all.PNG1236×486 28.6 KB

ZOOM VERTICAL

zoom_vertical
zoom_vertical.PNG1251×497 20.1 KB

ZOOM HORIZONTAL

zoom_horizontal_middle
zoom_horizontal_middle.PNG1261×478 28.7 KB

2

Here’s how: https://codepen.io/etpinard/pen/LzWMvQ?editors=0010

3

Thanks. I tried adding scaleanchor and scaleratio but it’s still not working. It only zooming in one trace. Here is a small example.

var data = [
{
x: [‘2011-08-08’, ‘2011-08-09’, ‘2011-08-10’],
y: [6, 10, -2],
error_y: {
type: ‘data’,
array: [1, 2, 3],
visible: true
},
type: ‘scatter’,
mode: ‘markers’,
name: ‘North’,
hoverinfo: ‘text+x+y’,
yaxis: ‘y3’
},
{
x: [‘2011-08-08’, ‘2011-08-09’, ‘2011-08-10’],
y: [-1, 3, 5],
error_y: {
type: ‘data’,
array: [.7, .8, .9],
visible: true
},
type: ‘scatter’,
mode: ‘markers’,
name: ‘East’,
hoverinfo: ‘text+x+y’,
yaxis: ‘y2’
},
{
x: [‘2011-08-08’, ‘2011-08-09’, ‘2011-08-10’],
y: [2, -4, 6],
error_y: {
type: ‘data’,
array: [.2, .4, .6],
visible: true
},
type: ‘scatter’,
mode: ‘markers’,
name: ‘Up’,
hoverinfo: ‘text+x+y’,
yaxis: ‘y’
}
];
var layout = {
xaxis: {title: ‘Date’, tickformat: ‘%Y/%m/%d’},
yaxis: {
domain: [0, 0.30],
title: ‘Up (cm)’,
scaleanchor: ‘x’,
scaleratio: 0.5
},
yaxis2: {
domain: [0.35, 0.60],
title: ‘East (cm)’,
scaleanchor: ‘x’,
scaleratio: 0.5
},
yaxis3: {
domain: [0.65, 1.0],
title: ‘North (cm)’,
scaleanchor: ‘x’,
scaleratio: 0.5
},
margin: {// update the left, bottom, right, top margin
l: 40, b: 80, r: 10, t: 30
},
hovermode: ‘closest’,
title: ‘Change NEU’
};

Plotly.newPlot('myDiv', data, layout);
4

I got it working. Instead of anchoring to ‘x’, I need to anchor to ‘y’. thank you very much.
scaleanchor: ‘y’

Also, when selecting vertical or horizontal how to tell what date range was selected?

5

I got the date range I needed. I use plotly_selected as such. Thanks again.

myPlot.on(‘plotly_selected’, function (eventdata){
var points = eventdata.points[0],
pointNum = points.pointNumber;
alert(trace3.x[pointNum]);
});

6

Never mind I have to use dragmode: ‘select’ so it cannot zoom when select. Question - can you select and zoom at same time?

7

OK, I found your example and this will work.

8

@btran007 If you are looking for something in plotly dash, here it is

app=dash.Dash()

app.layout = html.Div([
                dcc.Graph(id='graph',figure=fig),
                html.Pre(id='relayout-data', style=styles['pre']),
                dcc.Graph(id='graph2', figure=fig)])

@app.callback(Output('relayout-data', 'children'),
              [Input('basic-interactions', 'relayoutData')])
def display_relayout_data(relayoutData):
    return json.dumps(relayoutData, indent=2)


@app.callback(Output('graph2', 'figure'),
             [Input('graph', 'relayoutData')], # this triggers the event
             [State('graph2', 'figure')])
def graph_event(select_data,  fig):
    try:
       fig['layout'] = {'xaxis':{'range':[select_data['xaxis.range[0]'],select_data['xaxis.range[1]']]}}
    except KeyError:
       fig['layout'] = {'xaxis':{'range':[zoomed out value]}}
return fig

app.run_server()