I am currently working on an Angular application where I need to implement zoom in and zoom out functionality for a Plotly chart. While the default hoverable mode bar provides this feature, it is not suitable for our specific use case. We require user-created on-click buttons to control the zooming of the chart. Is there a way to simulate the actions of the hoverable mode bar's zoom in and zoom out functions through custom on-click buttons? If not, what alternative solutions can be explored? Any suggestions would be greatly appreciated.
Sample code snippet from .ts file:
basicChart() {
var trace1 = {
x: ['2020-10-04', '2021-11-04', '2023-12-04'],
y: [90, 40, 60],
type: 'scatter'
};
var data = [trace1];
var layout = {
title: 'Chart',
showlegend: false
};
Plotly.newPlot('myDiv', data, layout);
}