Highcharts Area chart gradient fill

Solution 1:

I think that you can use linear gradient in case of your chart. You can find information about this gradient on Highcharts website: http://www.highcharts.com/docs/chart-design-and-style/colors

  fillColor: {
    linearGradient: {
      x1: 0,
      x2: 0,
      y1: 0,
      y2: 1
    },
    stops: [
      [0, Highcharts.getOptions().colors[2]],
      [0.8, hexToRgba(Highcharts.getOptions().colors[2], 0)]
    ]
  }

You can use stacking: normal to have your area series on top of each other and marker.fillColor to make white fill on all of your markers.

plotOptions: {
  area: {
    stacking: 'normal',
    marker: {
      symbol: 'circle',
      lineWidth: 2,
      fillColor: 'white',
      lineColor: null,
    }
  }
},

Here you can find an example how it can work: http://jsfiddle.net/bLdhefff/6/

Best regards.