Highcharts pattern background

by malonso

HTML

<script src="http://code.highcharts.com/highcharts.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
                    }
                }
            },
            point: {
                events: {
                    mouseOut: function(){
                        var point = this;
                        setTimeout(function(){
                            $(point.graphic.element).attr('fill', 'url(#pattern)');
                        }, 0);
                    },
                    mouseOver: function(){
                        var point = this;
                        setTimeout(function(){
                            $(point.graphic.element).attr('fill', 'url(#pattern2)');
                        }, 0);
                    }
                }
            }
        }
    },
    
    series: [{
        color: '#eee',
        type: 'column',
        data: [{
            y: 129
        }, {
            y: 75
        }]
    }]
}, function(chart){
    var r = chart.renderer,
        pattern = r.createElement('pattern')
            .attr({
                id: 'pattern',
                patternUnits: 'userSpaceOnUse',
                x: 0,
                y: 0,
                width: 15,
                height: 15,
                viewBox: '0 0 10 10',
            })
            .add(r.defs);

   r.rect(0, 0, 10, 10, 0)
       .attr('fill', '#ddd')
       .add(pattern);
    
   r.image('http://highcharts.com/demo/gfx/sun.png',0,0,30,30)
       
       .attr({
           stroke: '#333'
       })
       .add(pattern);

    
    
    pattern = r.createElement('pattern')
        .attr({
            id: 'pattern2',
            patternUnits: 'userSpaceOnUse',
            x: 0,
            y: 0,
            width: 15,
            height: 15,
            viewBox: '0 0 10 10',
       ...