I am building an angular application. In which we need to create on click buttons for zooming in and zooming out for plotly chart. We can zoom in zoom out in plotly chart using buttons on hoverable mode bar but this is not required for our application. We want to zoom in and zoom out the chart using user created on click buttons. Is there a way to trigger actions of hoverable mode bar zoom in and out using on click buttons? if not then what are the other ways to do? any suggestion is appreciated.

Code in .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);
}

I am building an angular application. In which we need to create on click buttons for zooming in and zooming out for plotly chart. We can zoom in zoom out in plotly chart using buttons on hoverable mode bar but this is not required for our application. We want to zoom in and zoom out the chart using user created on click buttons. Is there a way to trigger actions of hoverable mode bar zoom in and out using on click buttons? if not then what are the other ways to do? any suggestion is appreciated.

Code in .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);
}

• javascript
• angular
• typescript
• plotly
• plotly.js

• Please add your existing code to give users a place to start. – sfarbota Commented Jan 20, 2020 at 4:53
• @sfarbota I have added the .ts file code. – Vikram Commented Jan 20, 2020 at 5:03
• 1 You cannot trigger native Plotly events, but you can provide new X and Y ranges for your chart and apply Plotly.relayout. Can't your users a mouse for zooming in? – Mark Commented Jan 28, 2020 at 20:27
• Yes I did it this way only. @Mark – Vikram Commented Jan 30, 2020 at 9:07

1 Answer 1

I had this same problem and ended up just using the DOM to click the modebar.

zoom-functions-example.js

const plot = Plotly.newPlot('myDiv', data, layout)
let zoomIn = function(plot){
  plot.querySelector('a[data-attr="zoom"][data-val="in"]').click()
},
let zoomOut = function(plot){
  plot.querySelector('a[data-attr="zoom"][data-val="out"]').click()
},
let resetView = function(plot){
  plot.querySelector('a[data-attr="zoom"][data-val="reset"]').click()
},

CSS to hide modebar:

.modebar-container{
  display: none;
}