Create a Highcharts Pie Chart Legend Inside a Table

Question

Is there a way to create a Highcharts legend inside of a table? I want to be able to style the background of the legend for my Highcharts pie with alternating background colors for each element and custom borders.

I've formatted my legend like so, but cannot figure out how to embed it inside a table that I can then format.

legend: {
        layout: 'vertical',
        align: 'center',
        verticalAlign: 'bottom',
        backgroundColor: '#f3f3f3',
        borderWidth: 0,
        useHTML: true,
        itemMarginBottom: 10,
        labelFormatter: function () {
            return '<div style="width:200px"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.percentage.toFixed(0) + '%</span><span style="float:right; margin-right:15%">$' + Highcharts.numberFormat(this.y, 0) + '</span></div>';
        }

    }, 

JS Fiddle: http://jsfiddle.net/hAnCr/135/

Any help would be appreciated. Thanks!

Answer 1

If you want to put that legend in separate table, somewhere on a page - it's not supported.

If you want to just generate standard legend as is, but just use table instead of spans:

• instead of return <div style="width:200px"> ... </div> use return <table> ... </table>
• set useHTML: true