Reset Zoom (From Angular App)

[alexgoldstone]

I have successfully used angular-plotly.js to embed a Plotly.js chart within my Angular application.

If I update the X or Y data then the chart updates as expected.

The user is able to zoom using the standard Plotly.js zoom functionality and the user can double-click to reset the zoom level.

1. Is it possible to reset the zoom level from within the Angular application (e.g. if a button outside the Ploylt.js chart is clicked then reset the zoom level of the chart as though the user double-clicked the chart)?

2. Is it possible to obtain the zoom level and/or min and max values for the range displayed after the user has zoomed? The events do not seem to receive the necessary data values.

[andrefarzat]

Hi, @alexgoldstone, Following the "angular way", there is a PlotlyService which injects the plotly.js wrapper. We can improve it to have these interfaces. Please check the service first: https://github.com/plotly/angular-plotly.js/blob/master/src/app/plotly/plotly.service.ts
It is designed to work with the div element, but we can change it to id, so it would be possible to do something like PlotlyService.update("componentId", { /* something */ });. What do you think ?

Related to 2, if it's possible to do it in plotly.js, we can do it with the wrapper. Do you know how to do it in plotly.js?

[alexgoldstone]

Hi @andrefarzat. Thank you for pointing me towards the PlotlyService. I have been able to call the functions contained within this, however I do not see a method to programatically reset the zoom level (or control the zoom in general) so I have sent a question to the main Plot.ly community forum [1] and then will report back once I know if / how PlotlyService needs extending.

[1] https://community.plot.ly/t/un-zoom-programatically/13722?u=zander

[alexgoldstone]

@andrefarzat The suggestion at the above forum is to call the following:

Plotly.relayout( figure, {
‘xaxis.autorange’: true,
‘yaxis.autorange’: true
});

The PlotlyService does not currently expose relayout... correct?

[andrefarzat]

@alexgoldstone you were correct. The PlotlyService had only four exposed methods, and you need the plotly instance to use it. Thus, I just updated the library to version 0.1.5 making it possible to you to get the plotly instance and the plotly object.

You will need to add a divId on your plotly-plot component. On the PlotlyService now there are the methods getInstanceByDivId which returns the plotly instance ( the html element which plotly rendered the graph ), and the method getPlotly which returns the plotly.js object. An example:

<plotly-plot divId="some-graph" [layout]="layoutObject" [data]="dataObject"></plotly-plot>

class SomeComponent implements OnInit {
    constructor(public plotly: PlotlyService)  {}

    ngOnInit() {
        const Plotly = this.plotly.getPlotly();
        const graph = this.plotly.getInstanceByDivId('some-graph');

        Plotly.relayout(graph, ...);
    }
}

Please, check it out the code here : https://github.com/plotly/angular-plotly.js/blob/v0.1.15/src/app/plotly/plotly.service.ts#L70

Let me know if this suits your need. If not, feel free to reopen the issue 😸

[alexgoldstone]

Hi @andrefarzat

Thank you for addressing this issue.

For the most part your changes worked as described but please note that the response to getInstanceByDivId is always undefined.

So, this does not work for me:

Plotly.relayout(graph, ...);

This does work:

Plotly.relayout('some-graph', ...);

Do you want me to raise this as a new issue or can you re-open this one?

[andrefarzat]

@alexgoldstone please, re-open it here so I can work on it. Gonna write better unit-tests to cover the issue.

Funny is that I didn't know that the Plotly.relayout method accepts string instead of the instance. Good to know

[mp54214]

I would like to comment yet this closed discussion. For me

this.plotly.getPlotly().relayout('plotlyChart', update);

does not work either. Error message is:
ERROR TypeError: Cannot read property '_guiEditing' of undefined
at _relayout (plotly.js:106148)
at Object.relayout (plotly.js:106046)

However, if I use Angular's templateRef via ViewChild I can make it work by the following:

    <plotly-plot 
        #chart
        [data]="data" 
        [layout]="layout">
    </plotly-plot>

@ViewChild('chart') el: any;

...
    constructor(public plotly: PlotlyService) {
    }
...
     const update = {
            title: 'New Title',
            data: this.data
      }
...
this.plotly.getPlotly().relayout(this.el.plotEl.nativeElement, update);

[jml0123]

For anyone who is facing the same issue of not being able to use the PlotlyService class due to plotly.getPlotly() returning a Promise<any>.

I tried to implement the fix below, but couldn't access the 'relayout' method because
plotly.getPlotly() returns a Promise<any>

To solve this, use the relayout method after the promise is finished:

const Plotly = this.plotly.getPlotly(); 

Plotly.then(plotlyService => plotlyService.relayout(this.el.plotEl.nativeElement,
      {
        ...layout changes here...
      }
));

<plotly-plot
#chart
[data]="data"
[layout]="layout">

@ViewChild('chart') el: any;

...
constructor(public plotly: PlotlyService) {
}
...
const update = {
title: 'New Title',
data: this.data
}
...
this.plotly.getPlotly().relayout(this.el.plotEl.nativeElement, update);