Gradient Fill on Line Chart (Highcharts)

Question

I've been unable to find documentation that would let me combine the look of these two charts:

Irregular Time Chart
Line/Time Chart with Gradient Fill

I'm attempting to put a gradient fill under each of 3 lines in an irregular time chart.

Here's as far as I got: http://jsfiddle.net/WNDUH/

Any help would be appreciated!

Answer 1

Try moving the area object into plotOptions then defining the type and fillColor of each series.

EDIT

http://jsfiddle.net/WNDUH/10/

JS:

$(function () {
  var chart;
  $(document).ready(function () {
    chart = new Highcharts.Chart({
        chart : {
          renderTo : 'container',
          type : 'spline',
          backgroundColor : {
            linearGradient : [0, 0, 0, 400],
            stops : [
              [0, 'rgb(96, 96, 96)'],
              [1, 'rgb(16, 16, 16)']
            ]
          }
        },
        title : {
          text : 'Snow depth in the Vikjafjellet mountain, Norway'
        },
        subtitle : {
          text : 'An example of irregular time data in Highcharts JS'
        },
        xAxis : {
          type : 'datetime',
          dateTimeLabelFormats : { // don't display the dummy year
            month : '%e. %b',
            year : '%b'
          }
        },
        yAxis : {
          title : {
            text : 'Snow depth (m)'
          },
          min : 0
        },
        tooltip : {
          formatter : function () {
            return '<b>' + this.series.name + '</b><br/>' +
            Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
          }
        },
        plotOptions : {
          area : {
            lineWidth : 1,
            marker : {
              enabled : false,
              states : {
                hover : {
                  enabled : true,
                  radius : 5
                }
              }
            },
            shadow : false,
            states : {
              hover : {
                lineWidth : 1
              }
            }
          }
        },
        series : [{
            name : 'Winter 2007-2008',
            type : "area",
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[0]],
                [1, 'rgba(2,0,0,0)']
              ]
            },
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data : [
              [Date.UTC(1970, 9, 27), 0],
              [Date.UTC(1970, 10, 10), 0.6],
              [Date.UTC(1970, 10, 18), 0.7],
              [Date.UTC(1970, 11, 2), 0.8],
              [Date.UTC(1970, 11, 9), 0.6],
              [Date.UTC(1970, 11, 16), 0.6],
              [Date.UTC(1970, 11, 28), 0.67],
              [Date.UTC(1971, 0, 1), 0.81],
              [Date.UTC(1971, 0, 8), 0.78],
              [Date.UTC(1971, 0, 12), 0.98],
              [Date.UTC(1971, 0, 27), 1.84],
              [Date.UTC(1971, 1, 10), 1.80],
              [Date.UTC(1971, 1, 18), 1.80],
              [Date.UTC(1971, 1, 24), 1.92],
              [Date.UTC(1971, 2, 4), 2.49],
              [Date.UTC(1971, 2, 11), 2.79],
              [Date.UTC(1971, 2, 15), 2.73],
              [Date.UTC(1971, 2, 25), 2.61],
              [Date.UTC(1971, 3, 2), 2.76],
              [Date.UTC(1971, 3, 6), 2.82],
              [Date.UTC(1971, 3, 13), 2.8],
              [Date.UTC(1971, 4, 3), 2.1],
              [Date.UTC(1971, 4, 26), 1.1],
              [Date.UTC(1971, 5, 9), 0.25],
              [Date.UTC(1971, 5, 12), 0]
            ]
          }, {
            name : 'Winter 2008-2009',
            type : "area",
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[1]],
                [1, 'rgba(2,0,0,0)']
              ]
            },
            data : [
              [Date.UTC(1970, 9, 18), 0],
              [Date.UTC(1970, 9, 26), 0.2],
              [Date.UTC(1970, 11, 1), 0.47],
              [Date.UTC(1970, 11, 11), 0.55],
              [Date.UTC(1970, 11, 25), 1.38],
              [Date.UTC(1971, 0, 8), 1.38],
              [Date.UTC(1971, 0, 15), 1.38],
              [Date.UTC(1971, 1, 1), 1.38],
              [Date.UTC(1971, 1, 8), 1.48],
              [Date.UTC(1971, 1, 21), 1.5],
              [Date.UTC(1971, 2, 12), 1.89],
              [Date.UTC(1971, 2, 25), 2.0],
              [Date.UTC(1971, 3, 4), 1.94],
              [Date.UTC(1971, 3, 9), 1.91],
              [Date.UTC(1971, 3, 13), 1.75],
              [Date.UTC(1971, 3, 19), 1.6],
              [Date.UTC(1971, 4, 25), 0.6],
              [Date.UTC(1971, 4, 31), 0.35],
              [Date.UTC(1971, 5, 7), 0]
            ]
          }, {
            name : 'Winter 2009-2010',
            type : "area",
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[2]],
                [1, 'rgba(2,0,0,0)']
              ]
            },
            data : [
              [Date.UTC(1970, 9, 9), 0],
              [Date.UTC(1970, 9, 14), 0.15],
              [Date.UTC(1970, 10, 28), 0.35],
              [Date.UTC(1970, 11, 12), 0.46],
              [Date.UTC(1971, 0, 1), 0.59],
              [Date.UTC(1971, 0, 24), 0.58],
              [Date.UTC(1971, 1, 1), 0.62],
              [Date.UTC(1971, 1, 7), 0.65],
              [Date.UTC(1971, 1, 23), 0.77],
              [Date.UTC(1971, 2, 8), 0.77],
              [Date.UTC(1971, 2, 14), 0.79],
              [Date.UTC(1971, 2, 24), 0.86],
              [Date.UTC(1971, 3, 4), 0.8],
              [Date.UTC(1971, 3, 18), 0.94],
              [Date.UTC(1971, 3, 24), 0.9],
              [Date.UTC(1971, 4, 16), 0.39],
              [Date.UTC(1971, 4, 21), 0]
            ]
          }
        ]
      });
  });
});

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>