Highcharts - Gradient Sample

Gradient Sample using highcharts

by shivkumarganesh

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

CSS

.bandColor {
  background-color: red;
}

JavaScript

Highcharts.chart('container', {
  xAxis: {
    plotBands: [{ // mark the weekend
      from: Date.UTC(2010, 0, 1),
      to: Date.UTC(2010, 0, 20),
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
          [0, '#55BF3B'], //green
          [0.5, 'yellow'],
          [1, '#DF5353'] //red
        ]
      }
    }],
    tickInterval: 24 * 3600 * 1000, // one day
    type: 'datetime'
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 24 * 3600 * 1000
  }]
});