Highcharts example

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto" class="zoom"></div>

JavaScript

var chart;
var options = {
    chart: {
        renderTo: 'container',
        type: 'line',
        marginRight: 130,
        marginBottom: 25,
        events: {
            redraw: function() {
            console.log('test');
                this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
                .on('click', function() {
                    if(options.yAxis.max) {
                        delete options.yAxis.max; // return to default
                    } else {
                        options.yAxis.max = (extremes.dataMax - extremes.dataMin) / 1.85;
                    }
                    chart = new Highcharts.Chart(options);    
                    if ($('#container').hasClass('zoom')) {
                        $('image').attr('href', 'http://inadcod.com/img/zoom1.png')
                        $('#container').removeClass().addClass('zoom1')                      
                            } else {
                            $('image').attr('href', 'http://inadcod.com/img/zoom.png')
                            $('#container').removeClass().addClass('zoom')
                            }
                               
                })
                .css({
                    cursor: 'pointer',
                    position: 'relative'
                }).attr({
                    id: 'myImage'
                }).add();
            }
        }
    },

    title: {
        text: 'Test Chart',
        x: -20 //center
    },
    yAxis: {
        endOnTick: false,
        title: {
            text: 'some value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'}]
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 100,
        borderWidth: 0
    },
 ...