Zoom Events in JavaScript
How to bind callback functions to zoom events in D3.js-based JavaScript charts.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
var graphDiv = document.getElementById('myDiv');
var N = 40,
x = d3.range(N),
y = d3.range(N).map( d3.random.normal() ),
data = [ { x:x, y:y } ];
layout = { title: {text: 'Click-drag to zoom' }};
Plotly.newPlot(graphDiv, data, layout);
graphDiv.on('plotly_relayout',
function(eventdata){
alert( 'ZOOM!' + '\n\n' +
'Event data:' + '\n' +
JSON.stringify(eventdata) + '\n\n' +
'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' +
'x-axis end:' + eventdata['xaxis.range[1]'] );
});
