Custom buttons Zoom in & out from Angular App

[Haamdiben]

Hello, I was looking for a way to hide the bar of plotly charts (done) and create my own button to zoom in & out, so as I was searching I've found already someone that was looking almost for the same thing #14

so i've tried this part :
Plotly.relayout( figure, { ‘xaxis.autorange’: true, ‘yaxis.autorange’: true });

but am facing problems because the plotly service can't knows this function. Here are packages that i'am using:

"plotly.js": "^2.3.1", "plotly.js-dist": "^2.3.0", "plotly.js-dist-min": "^2.5.1", "@types/plotly.js": "^1.54.13", "angular-plotly.js": "^4.0.4",

So if anyone knows anything, it will be helpful, thank you all !

[andrefarzat]

@Haamdiben it should work as you described. Are you using the getPlotly method from PlotlyService to get the plotlyjs instance to use the relayout method?

if yes, what error you're getting?
Do you mind pasting the code and the error ?

[Haamdiben]

@andrefarzat Hello and thank you for your quick answer, actually it's like the method relayout doesn't exist

[andrefarzat]

@Haamdiben you're missing the await keyword to unwrap the promise.
As you're using on ngOnInit (a non-async method), try this:

this.plotly.getPlotly().then(plotly => {
    const graph = this.plotly.getInstanceByDivId('graph');
    plotly.relayout(graph, ... );
});

[Haamdiben]

Yeah! You're right, that fixed the issue! Maybe I should learn a little more about the promises.
Thank you so much!