score: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)
                        }
                    }
                }

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

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

score: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

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

score:10

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.


Related Query

More Query from same tag