6

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

4
  • 1
    Could you create jsFiddle? To reset zoom you can also use chart.x/yAxis[0].setExtremes(null,null)
    – Paweł Fus
    Mar 8, 2013 at 11:13
  • due to company policy am unable to show using jsFiddle. But the main idea: I have master/detailed charts, where when selecting the master it will update the detailed chart. I also enabled the zoom on the detailed chart. Now I want to add a custom button on the detailed chart the will remove the plotBand from the master chart, reset the categories in the detailed chart and reset the zoom - currently I have problem removing the "Reset Zoom" button and resetting the zoom Mar 10, 2013 at 9:31
  • ps: chart.x/yAxis[0].setExtremes(null,null) didn't work Mar 10, 2013 at 9:33
  • Use some fake data in example. I'm not sure how could I help you, when I can't see what have you done. I think this should be possible to achieve.
    – Paweł Fus
    Mar 11, 2013 at 12:11

6 Answers 6

11

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.

2
  • 7
    You can do like "chart.zoomOut()". it will hide Reset Zoom button as well. see here jsfiddle.net/tvHg6/18
    – Pratik
    Sep 15, 2014 at 7:21
  • It works like a charm. those who are looking to zoom out a chart programmatically. This is the one for you
    – Balaji A
    Nov 10, 2022 at 11:39
4

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();

3

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

1

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();
}
0
  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)
                        }
                    }
                }
0

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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.