align gridlines with dots in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

align gridlines with dots in line chart

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() {/*ww  w  . j a  v a  2s.c o m*/
  $('#container').highcharts({
    "chart": {
      "type": "spline",
      "panning": true,
      "animation": false,
      "reflow": false,
      "events": {}
    },
    "plotOptions": {
      "series": {
        "lineWidth": 3,
        "cursor": "pointer",
        "states": {
          "hover": {
            "enabled": false,
            "marker": {
              "enabled": false
            }
          }
        },
        "point": {
          "events": {}
        }
      }
    },
    "xAxis": {
      "categories": [], // "00:00" to "23:00",
      "gridLineWidth": 1,
      "gridLineColor": "#efefef",
      "minRange": 5,
      "lineWidth": 3
    },
    "yAxis": {
      "title": {
        "text": ""
      },
      "gridLineWidth": 1,
      "gridLineColor": "#efefef",
      "style": {
        "display": "none"
      },
      "minRange": 6
    },
    series: [{
       data:[12,3,4,6,7,54,4],
      pointPlacement: 'between'
    }]
  });
});

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

Related Tutorials