Highcharts pattern background

HTML

<script src="http://highcharts.com/js/testing-exporting.js"></script>
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

JavaScript

window.chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },    
    xAxis: {
        categories: []
    },
    
    plotOptions: {
        column: {
            marker: {
                states: {
                    hover: {
                        enabled: false
                    }
                }
            },

        }
    },
    
    series: [{
        color: '#eee',
        type: 'area',
        data: [{
            y: 129
        }, {
            y: 75
        },{
            y: 75
        },{
            y: 4
        },{
            y: 122
        },{
            y: 143
        },{
            y: 111
        },{
            y: 83
        },{
            y: 110
        },{
            y: 175
        },{
            y: 120
        },{
            y: 100
        },]
    }]
}, function(chart){
    var r = chart.renderer,
        pattern = r.createElement('pattern')
            .attr({
                id: 'pattern',
                patternUnits: 'userSpaceOnUse',
                x: 0,
                y: 0,
                width: 6,
                height: 6,
                viewBox: '0 0 10 10',
            })
            .add(r.defs);

   r.rect(0, 0, 10, 10, 0)
       .attr('fill', '#95b3ce')
       .add(pattern);
    
   r.path(['M', 10, 0, 'L', 0, 10, 'M', 10, 10, 'L', 0.35, 0.35, 'M', 9.65, 9.65, 'L', 10, 10])
       
       .attr({
           stroke: '#7794af'
       })
       .add(pattern);
    
   $(chart.series[0].area.element).attr('fill', 'url(#pattern)');

    
});