Accepted answer

First Prepare a string for the chart to display

Clone Series To Redraw as highcharts set it null after draw.

var seriesClone=[{
        name: 'USD to EUR',
        data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]

Series Options To SET

   var chartOptions={   

    chart: {
        zoomType: 'xy'

    rangeSelector: {
        selected: 1

    series: [{
        name: 'USD to EUR',
        data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]

 var chart = new Highcharts.StockChart(chartOptions);

And When you want to change the value of ZoomType redeclare the chart like this

   myChart=new Highcharts.StockChart(chartOptions); 

Working example JSFIDDLE


With Highcharts v5 you can now do this:

chart1.update({chart: {zoomType: "y"}})

The update function dynamically updates the chartoptions to imperitively change zoomType post render.


You can do something like this:

var chart1 = new Highcharts.StockChart({
   chart: {
      zoomType: 'xy', //requried!

function SwitchToZoomX() {
   chart1.pointer.zoomX = true;
   chart1.pointer.zoomY = false;
   chart1.pointer.zoomHor = true;
   chart1.pointer.zoomVert = false;

function SwitchToZoomY() {
   chart1.pointer.zoomY = true;
   chart1.pointer.zoomX = false;
   chart1.pointer.zoomVert = true;
   chart1.pointer.zoomHor = false;

Related Query

More Query from same tag