CODEWITHSUNDEEP
javascriptjqueryhighcharts
user1049997
user1049997

Reputation: 1593

Reset / Set ZoomType Control in Highstock

I am using highcharts api to develop charts in my application. I am using highstack class from highcharts.

What I am looking is I want handle the zoom controls from external buttons.

for example there is a radio button like zoom (yes, no), if we select yes then zoom functionality should be enable in my chart. If no selected then zoom functionality should be disabled.

I have tried with following property:

zoomType: 'xy'

I have tried to reset the above property, but failed.

Please give me any suggestion to fix this issue.

Thanks in advance..

Upvotes: 2

Views: 1381

Answers (1)

slawekkolodziej
slawekkolodziej

Reputation: 713

Well, you can just remove mousedown handler with the following code: chart.container.onmousedown. It's not the best solution (and I haven't tested this on mobile when touch events are used), but anyway it's a good starting point.

Here you can find live demo: http://jsfiddle.net/3qYAZ and that demo's code:

window.chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        zoomType: 'x'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

}, function (chart) {

    var checkbox = $('#zoom'), // a checkbox input in your html
        zoomHandler = chart.container.onmousedown;

    checkbox.on('change', function () {
        if (this.checked)
            chart.container.onmousedown = zoomHandler;
        else
            chart.container.onmousedown = null;
    });
});

Upvotes: 1

Related Questions