ElementStacks

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>

JavaScript

function areaSplineGaps(serie, color){
    var chart = serie.chart,
        renderer = chart.renderer,
        d = serie.graphPath,
        h = chart.plotHeight,
        group, area;
    
    d.push('L', d[d.length-2], h, 'L', d[1], h)

    group = renderer.g()
        .translate(serie.group.translateX, serie.group.translateY)
        .attr({zIndex: 0})
        .add();

    var area = renderer.path(d).attr({
        fill: color
    }).add(group)

    serie.remove();    
        
    this.addGap = function(from, to) {
        from = chart.xAxis[0].translate(from);
        to = chart.xAxis[0].translate(to);
        
        return renderer.rect(from, 0, to-from, h, 0)
            .attr({fill: 'white'})
            .add(group)
    }
}

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    plotOptions: {
        areaspline: {
            lineWidth: 1,
            marker: {
                enabled: false
            },
            showInLegend: false,
            stacking: 'normal'
        }
    },
    series: [{
        type: 'spline',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 
               135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },{
        type: 'areaspline',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 
               135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
},function(chart){
    
    var a = new areaSplineGaps(chart.series[1], 'rgba(200,0,0,0.7)');
    
    a.addGap(2,3)
    a.addGap(5,8)    
});