Symbol-outline with pie chart -or- custom legend symbols

Question

I have a pie chart with a white slice/segment and grey border. Unfortunately, the border does not apply to the legend icon! I am wondering if it’s necessary to style the legend symbol separately. I did not find any property in the API description.

There are two ideas, how to make this work. Which one will work?

1. create a custom SVG image for the item (great for flexibility)
2. enable the outline for the legend symbol

Here’s the example: http://jsfiddle.net/c2XVz/

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        colors: [
        'blue'      , 
        'red'   , 
        'silver'        ,
        'orange'    , 
        'green'     ,
        'grey'  , 
        'gold'      ,
        'rgba(80, 183, 123, 1)' ,
        'rgba(128, 0, 102, 1)'  ,
        'rgba(150, 124, 100, 1)'    ,
        'rgba(193, 10, 0, 1)'       ,
        'rgba(91, 214, 235, 1)' ,
        'rgba(90, 111, 137, 1)'     ,
        'rgba(212, 173, 156, 1)'    ,
        'rgba(145, 145, 145, 1)'    ,
        'rgba(146, 184, 214, 1)'
        ],
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Lorem ipsum 2013'
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            x: -60,
            y: 72,
            layout: 'vertical'
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true,
                slicedOffset: 20
            }
        },
        series: [{
            type: 'pie',
            name: 'Expenses',
            data: [
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    {
                        name: 'Not categorized',
                        y: 10.0,
                        color: '#ffffff',
                        borderColor: '#646464',
                        borderWidth: 0.5,
                        sliced: true,
                        selected: true
                    }
                ]
        }]
    });
});

Thank you for any clue…

Answer 1

I don't see any options in the API for this level of customization in drawing the legend symbol. It is pretty easy to hack in after the chart is rendered:

$(chart.series[0].data).each(function(i,slice){
   $(slice.legendSymbol.element).attr('stroke-width','1');
   $(slice.legendSymbol.element).attr('stroke','gray');
});

See fiddle here.

Answer 2

Mark's answer isn't working for line/bar/column types. The code below supports those:

$(chart.series).each(function(i,slice){
   $(slice.legendSymbol.element).attr('stroke-width','1');
   $(slice.legendSymbol.element).attr('stroke','black');
});

Fiddle here