set a maximum number of ticks with a fixed interval in area chart - Javascript highcharts

Javascript examples for highcharts:Area Chart

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

Description

set a maximum number of ticks with a fixed interval in area 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">
    window.onload=function(){/*from w  w w .  j  a  v  a  2  s. co m*/
var chartMain = new Highcharts.Chart({
  chart: {
    type: "area",
    renderTo: "js-chart-main",
  },
  xAxis: {
    type: 'datetime',
    minPadding: 0,
    maxPadding: 0,
    max: Date.UTC(2017, 0, 1) + 1000 * 60 * 60 * 8,
    tickInterval: 2 * 3600 * 1000,
  },
  series: [{
    pointStart: Date.UTC(2017, 0, 1),
    pointInterval: 3600 * 1000,
    data: [
      111.30,
      111.60,
      111.75,
      108.45,
      107.70,
      107.15,
      107.50,
      106.20,
      106.50,
      107.00,
      106.80,
      105.90,
      104.65,
      105.70,
      107.05,
      107.05,
      108.10,
      108.10,
      107.90,
      106.40,
      108.95,
      111.30,
      111.60,
      111.75,
      108.45,
      107.70,
      107.15,
      107.50,
      106.20,
      106.50,
      107.00,
      106.80,
      105.90,
      104.65,
      105.70,
      107.05,
      107.05,
      108.10,
      108.10,
      107.90,
      106.40,
      108.95,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null,
      null
    ]
  }]
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="js-chart-main" class="chart"></div>  
   </body>
</html>

Related Tutorials