Filling xAxis for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Filling xAxis for 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"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
var firstNightStart = Date.UTC(1970, 9, 21, 20),
  nightLength = 8 * 3600 * 1000, // 8h
  day = 24 * 3600 * 1000; // 24h
var data = [/*from w w w. j av  a 2s.c  om*/
  [Date.UTC(1970, 9, 21), 0],
  [Date.UTC(1970, 10, 4), 0.28],
  [Date.UTC(1970, 10, 9), 0.25]
];
var chart = Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        var xAxis = this.xAxis[0],
           ex = xAxis.getExtremes(),
          start = ex.min,
          plotBands = [];
          while (start + nightLength < ex.max) {
            plotBands.push({
              from: start,
              to: start + nightLength,
              color: 'rgba(156,156,156,.15)',
              label: {
                text: '?',
                style: {
                  color: '#D9B11D',
                  fill: '#D9B11D',
                  fontSize: '20px'
                },
                align: 'left',
                y: 30
              }
            });
            start += day;
          }
          xAxis.update({
             plotBands: plotBands
          });
      }
    }
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: data
  }]
});

      </script>  
   </body>
</html>

Related Tutorials