Set Max and Min values in zoom reset - Javascript highcharts

Javascript examples for highcharts:Zoom

  1. HOME
  2. Javascript
  3. highcharts
  4. Zoom

Description

Set Max and Min values in zoom reset

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from ww w  .  ja va2 s .  com
   $('#container').highcharts({
      chart: {
         zoomType: 'x',
      },
      xAxis: {
       type:'datetime',
      min: Date.UTC(1970, 5, 9),
      max: Date.UTC(1971, 10, 9)
    },
      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));
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div> 
      <button id="button">Get Y axis extremes</button> 
      <button id="button2">ResetZoom</button> 
      <div id="report"></div>  
   </body>
</html>

Related Tutorials