ExtJS 6 Reset chart zoom programatically

Question

How I can reset zoom (display the whole graph) of simple line chart programatically? I can't find a suitable method in the documentation.

I use Ext.chart.interactions.CrossZoom if its metter.

Answer 1

There is an undocumented undoZoom method in the CrossZoom class. You can use it like so:

chart.getInteraction('crosszoom').undoZoom();

Edit

The cross zoom interaction keeps the history zoom in a zoomHistory property. The undoZoom method goes back, one step/zoom at a time, along the zoom history.

Based on undoZoom method, I've created an resetZoom method that directly resets the chart to its initial zoom:

Ext.define(null, {
    override: 'Ext.chart.interactions.CrossZoom',

    resetZoom: function () {
        var zoomMap = this.zoomHistory[0],
            axes = this.getChart().getAxes();

        if (zoomMap) {
            for (var i = 0; i < axes.length; i++) {
                var axis = axes[i];
                if (zoomMap[axis.getId()]) {
                    axis.setVisibleRange(zoomMap[axis.getId()]);
                }
            }
        }
        this.getUndoButton().setDisabled(true);
        this.zoomHistory = [];
        this.sync();
    }
});

Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/264t

Another Edit

As @SergeyNovikov has noted in the comments, and as you can see from the undoZoom method and resetZoom override, it all comes down to the axis' setVisibleRange method. So you can also directly use it with min/max values as arguments to reset the zoom.