Edit in JSFiddle

$(function() {
  $('#container').highcharts({
		title: {
    	text: "Half Marathon finish times by Gender/Age"
    },
		xAxis: {
      categories: ['1:00', '1:30', '2:00', '2:30', '3:00', '3:30']
    },
    yAxis: {
      reversedStacks: false,
      title: {text: "count"}
    },
    plotOptions: {
      areaspline: {
        stacking: 'normal'
      },
      series: {
        fillOpacity: 0.2
      }
    },
    tooltip: {
      shared: true
    },
    series: [
      // first stack - top to bottom
      {
        type: 'areaspline',
        data: [3, 18, 25, 20, 10, 2],
        stack: 0,
        name: 'Male 20-40',
        color: Highcharts.Color("#445AFF").brighten(0.3).get('rgb')
      }, {
        type: 'areaspline',
        data: [0, 10, 20, 30, 20, 5],
        stack: 0,
        name: 'Male 40-60',
        color: Highcharts.Color("#445AFF").brighten(0).get('rgb')
      },  {
        type: 'areaspline',
        data: [0, 10, 20, 30, 20, 5],
        stack: 0,
        name: 'Male 60-100',
        color: Highcharts.Color("#445AFF").brighten(-0.3).get('rgb')
      },

      // second stack - top to bottom
      {
        type: 'areaspline',
        data: [1, 7, 23, 33, 23, 8],
        stack: 1,
        name: 'Female 20-40',
        color: Highcharts.Color("#E54DF0").brighten(0.3).get('rgb')
      }, {
        type: 'areaspline',
        data: [0, 5, 20, 30, 20, 5],
        stack: 1,
        name: 'Female 40-60',
        color: Highcharts.Color("#E54DF0").brighten(0).get('rgb')
      }, {
        type: 'areaspline',
        data: [0, 5, 20, 30, 20, 5],
        stack: 1,
        name: 'Female 60-100',
        color: Highcharts.Color("#E54DF0").brighten(-0.3).get('rgb')
      },
    ]
  });
});

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

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

<a href="https://stackoverflow.com/a/29252249/1366033">Reversed Stacks</a>