set maximum range for yAxis but keep axis dynamic within that range in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

set maximum range for yAxis but keep axis dynamic within that range in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from www. jav a  2s.c o m*/
$(function () {
    $('#container').highcharts({
        chart: {
            marginRight: 80 // like left
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            lineWidth: 1,
            max: 1000,
            min: 0,
            title: {
                text: 'Primary Axis'
            }
        }, {
            lineWidth: 1,
            opposite: true,
            title: {
                text: 'Secondary Axis'
            }
        }],
        series: [{
            data: [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]
        }]
    });
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        if ($(this).hasClass('big')) {
            $(this).removeClass('big');
            chart.series[0].setData([29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4]);
               chart.yAxis[0].setExtremes(0,50);
        } else {
            $(this).addClass('big');
            chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4]);
               chart.yAxis[0].setExtremes(0,1600);
        }
        });
    });
    });

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px"></div> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <button id="button">Change data set</button>  
   </body>
</html>

Related Tutorials