x-axis Gridlines on each separate y-axis for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

x-axis Gridlines on each separate y-axis 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.9.1.js"></script> 
      <script type="text/javascript">
$(function() {/*  w  w  w .ja  v a  2 s.co  m*/
   $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
      // split the data set into ohlc and volume
      var ohlc = [],
         volume = [],
         dataLength = data.length;
      for (i = 0; i < dataLength; i++) {
         ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
         ]);
         volume.push([
            data[i][0], // the date
            data[i][5] // the volume
         ])
      }
      // create the chart
      $('#container').highcharts({
          title: {
              text: 'AAPL Historical'
          },
            xAxis: {
                gridLineWidth: 1
            },
          yAxis: [{
              title: {
                  text: 'OHLC'
              },
              height: 160,
              lineWidth: 2
          }, {
              title: {
                  text: 'Volume'
              },
              top: 248,
              height: 60,
              offset: 0,
              lineWidth: 2
          }],
          series: [{
              type: 'line',
              name: 'AAPL',
              data: [100, 200, 300]
          }, {
              type: 'column',
              name: 'Volume',
              data: [100, 200, 300],
              yAxis: 1,
          }]
      });
   });
});

      </script> 
   </head> 
   <body> 
      <script src="https://github.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; min-width: 310px"></div>  
   </body>
</html>

Related Tutorials