ElementStacks

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 200px"></div>

JavaScript

window.chart = new Highcharts.Chart({
    
    chart: {
        renderTo: 'container',
        marginRight: 120
    },
    
    legend: {
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: 0,
        y: 100,
        width: 90
        
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
    },{ 
        data: [135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
}, function(chart){
    var series = chart.series[1],
        bbox = series.legendSymbol.getBBox(),
        group = $('.highcharts-legend', chart.container)[0];
    
    // Transforms given DOM element to Highcharts Element object
    function wrap(el) {
        var e = new Highcharts.Renderer.prototype.Element;
        e.attrSetters = {};
        e.element = el;
        e.renderer = chart.renderer;
        return e;
    }
    
    group = wrap(group);
    
    // remove old shape element (circle)
    series.legendSymbol.destroy();
    
    // now we can render new element
    series.legendSymbol = chart.renderer.rect(bbox.x,bbox.y,bbox.width,bbox.height)
        .attr({
            fill: 'red'
        })
        .add(group);
    
    // we don't need legend line anymore, but if you remove this, highcharts will throw an error
    chart.series[1].legendLine.hide();
        
});