✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Horizontal zoom across multiple graphs

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 VERTICAL

ZOOM HORIZONTAL

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

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);

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?

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]);
});

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

OK, I found your example and this will work.

@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()