Chanan Berler
Chanan Berler

Reputation: 595

Calling Reset Zoom manually

I have a chart where i allowed zooming in/out. Each time user zoom in/out "Reset Zoom" appears.

Now I have added a new customize button where i need to show X most updated column data. I have changed categories and data, but need also to reset the zoom.

Can this be done ? I still want to keep the "Reset Zoom" when user tries to zoom in/out. PS: I tried doing this.zoomOut() but then the "Reset Zoom" appeared :(

Regards Chanan

Upvotes: 7

Views: 17950

Answers (7)

JesseBoyd
JesseBoyd

Reputation: 1106

for react projects

import Highcharts from 'highcharts'

inside your react component function add

useEffect(() => {
    // Reset all Highcharts charts' zoom
    if (Highcharts.charts) {
      Highcharts.charts.forEach((chart) => {
        if (chart) {
          chart.zoomOut()
        }
      })
    }
  }, [condition1, condition2])

in this situation i have 2 conditions (any update to cause a reset) where i want the chart to reset the zoom add your state vars in the useEffect dependency array.

Upvotes: 0

Armin Groll
Armin Groll

Reputation: 41

We had a similar situation - user zooms, we add a 'save this zoom stage' button, user clicks the button, we save the new min/max time, but now we have to make the reset zoom button disappear.

This code did it and the button returns if the user zooms even further afterwards:

chart.resetZoomButton.hide();
chart.resetZoomButton = chart.resetZoomButton.destroy();

Upvotes: 0

Eden Chen
Eden Chen

Reputation: 19

  1. hide the original reset button
 chart: {
            resetZoomButton: {
                    theme: {
                        display: 'none'
                    }
                }
            }
  1. take care of the event
 buttons: {
                    resetButton: {
                        symbol: 'url(redo_icon.svg)',
                        _titleKey: "resetZoom",
                        y: 20,
                        x: -20,
                        onclick: function () {
                            this.xAxis[0].setExtremes(null,null);
                            this.yAxis[0].setExtremes(null,null)
                        }
                    }
                }

Upvotes: 0

gkelly
gkelly

Reputation: 288

I just called the button's click event and it worked fine.

given: v_chart is variable for Highcharts chart;

if (typeof v_chart.resetZoomButton !== 'undefined') {
    v_chart.resetZoomButton.element.onclick();
}

Upvotes: 1

Kalyan
Kalyan

Reputation: 105

If you want to reset the zoom on an external button click then do it as follows:

$("#YourOwnZoomBtnID").click(function(){ 

    $('.highcharts-button').click();
});

If you want to hide the Inbuilt Reset Button of highcharts then you can do it as follows:

xAxis: { categories: xAxisCategories
                ,events: {
      afterSetExtremes: function() {
        $('.highcharts-button').hide();
      }
    }}

jsfiddle example is here: jsfiddle

Thanks Kalyan

Upvotes: 3

Mike Milkman
Mike Milkman

Reputation: 633

As suggested here

chart.zoom()

But keep in mind that calling chart.zoom() does not trigger chart.events.selection event. Which is triggered if you click on "Reset button" manually or programmatically $('.highcharts-button').click();

Upvotes: 4

mpeac
mpeac

Reputation: 750

Pawel's suggestion of calling

chart.xAxis[0].setExtremes(null,null);

does work, btw, as shown here: http://jsfiddle.net/tvHg6/

However, although the chart zooms out, the resetZoom button is still hanging around, not sure how to hide it. Calling chart.resetZoomButton.hide() hides it, but it does so permanently.

Upvotes: 12

Related Questions