setting step on axis dynamically for line chart - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

setting step on axis dynamically for 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(){// w  w  w .ja  v  a 2 s. c  o m
$(function () {
    var setA = [29.9, 11.5, 36.4, 19.2, 4.0, 46.0, 48.2, 15.2, 16.4, 4.1, 5.6, 44.4];
    var setB = [129.2, 144.0, 176.0, 135.6, 248.5, 316.4, 694.1, 795.6, 954.4, 1029.9, 1171.5, 1506.4];
    var data = Math.random() < 0.5 ? setA : setB;
    var height=Math.max.apply(Math, data);
    if(height > 1000){
        height = 1000;
    }
    $('#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: height,
            min: 0,
            title: {
                text: 'Primary Axis'
            }
        }],
        series: [{
            data: data
        }]
    });
    $('#setStep').click(function () {
        var chart = $('#container').highcharts();
        chart.yAxis[0].update({
            tickInterval: 100
        });
    });
});
    });

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px"></div> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <button id="setStep">Set Interval to 100</button>  
   </body>
</html>

Related Tutorials