CODEWITHSUNDEEP
javascripthighcharts
lcguida
lcguida

Reputation: 3847

HighCharts - Set Max and Min values in zoom reset

I have a little problem with Highcharts zooming option.

I want the reset zoom to preserve a maximum and minimum that I set. The user can zoom in, but when he zooms out (with the reset zoom button), I want the chart to fit this maximum and minimum that I setted before.

Right now, highcharts grab the dataMin and dataMax values to reset zoom.

I tried to override thesse values in setExtreme event with no success.

Here is a snippet showing this behaviour:

$(function () {
  $('#container').highcharts({
    chart: {
        zoomType: 'x',
    },
    xAxis: { type:'datetime' },
    series: [{
        data: [
            [Date.UTC(1970, 10, 9), 0.25],
            [Date.UTC(1970, 10, 27), 0.2],
            [Date.UTC(1970, 11, 2), 0.28],
            [Date.UTC(1970, 11, 26), 0.28],
            [Date.UTC(1970, 11, 29), 0.47],
            [Date.UTC(1971, 0, 11), 0.79],
            [Date.UTC(1971, 0, 26), 0.72],
            [Date.UTC(1971, 1, 3), 1.02],
            [Date.UTC(1971, 1, 11), 1.12],
            [Date.UTC(1971, 1, 25), 1.2],
            [Date.UTC(1971, 2, 11), 1.18],
            [Date.UTC(1971, 3, 11), 1.19],
            [Date.UTC(1971, 4, 1), 1.85],
            [Date.UTC(1971, 4, 5), 2.22],
            [Date.UTC(1971, 4, 19), 1.15],

        ]
    }]
  });
  var chart = $('#container').highcharts();
  chart.xAxis[0].setExtremes(Date.UTC(1970, 5, 9), Date.UTC(1971, 10, 9));
});

http://jsfiddle.net/Ln7x4mba/1/

SOLUTION

Based in @jlbriggs answer and since I was dynamically updating the same chart, The solution was:

 chart.xAxis[0].update({min: myMinValue, max: myMacValue});

http://jsfiddle.net/Ln7x4mba/4/

Upvotes: 1

Views: 2853

Answers (2)

jlbriggs
jlbriggs

Reputation: 17791

If you set the min and max as part of your x axis configuration options, rather than calling the setExtremes() function after building the chart, the reset zoom works as expected (and it's more efficient):

xAxis: { 
  type:'datetime',
  min: Date.UTC(1970, 5, 9),
  max: Date.UTC(1971, 10, 9)
}

Updated fiddle:

Upvotes: 5

J. Titus
J. Titus

Reputation: 9690

Hide the button that appears inside the chart

chart: {
  resetZoomButton: {
    theme: {
      display: 'none'
    }
  }
}

then use your own button:

$('#button2').click(function(){
  chart.xAxis[0].setExtremes(Date.UTC(1970, 5, 9), Date.UTC(1971, 10, 9));
});

Updated Fiddle

Upvotes: 0

Related Questions