I'm using highcharts and would like to insert some logic in click reset zoom button event, but I didn't find a very good way. Searched in StackOverflow and found the best answer is:

event.srcElement.firstChild.data == "Reset zoom"

but this way has 1 problem that the event won't be triggered when we click the corner of 'Reset zoom' button. Only when we click on the tSpan of text 'Reset zoom' this way will work. Would like to ask if there's another solution.

I'm using highcharts and would like to insert some logic in click reset zoom button event, but I didn't find a very good way. Searched in StackOverflow and found the best answer is:

event.srcElement.firstChild.data == "Reset zoom"

but this way has 1 problem that the event won't be triggered when we click the corner of 'Reset zoom' button. Only when we click on the tSpan of text 'Reset zoom' this way will work. Would like to ask if there's another solution.

• javascript
• jquery
• highcharts

2 Answers 2

Just use setExtremes event, see: http://jsfiddle.net/BlackLabel/pjy9682s/3/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'x'
    },
    xAxis: {
        events: {
            setExtremes: function (e) {
                if(typeof e.min == 'undefined' && typeof e.max == 'undefined'){
                     console.log('reset zoom clicked');   
                } else {
                     console.log('zoom-in');   
                }
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
    }]
});

Highcharts provides a event called selection

chart:{
  events: {
    selection: function() { /* your code here */ }
  }
}

this fiddle will help you http://jsfiddle.net/M7cfm/