Chapter 5: Apply Legend to Pie Chart

Single series pie chart with legend next to it

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js">
    < script src = "http://code.highcharts.com/modules/data.js" >
</script>
</script>
<body>
    <center>
        <div id="container"></div>
        <div id="Results" class="datagrid">
            <table id="datatable">
                <thead>
                    <tr>
                        <th>Custodian Name</th>
                        <th>Processed Size (GB)</th>
                        <th>Total No. Documents</th>
                        <th>Total No. Documents Post Dedupe</th>
                        <th>Total No. Document Exported</th>
                        <th>Exported Size (GB)</th>
                        <th>OCR Doc Count</th>
                        <th>OCR Page Count</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td colspan="8">
                            <div id="paging"></div>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>Amble, Joan</td>
                        <td>6.9526</td>
                        <td>66417</td>
                        <td>34254</td>
                        <td>8890</td>
                        <td>1.2247</td>
                        <td>584</td>
                        <td>4333</td>
                    </tr>
                    <tr class="alt">
                        <td>Bima, Paloma</td>
                        <td>21.4212</td>
                        <td>85758</td>
                        <td>44056</td>
                        <td>19272</td>
                        <td>9.1574</td>
                        <td>630</td>
                        <td>6314</td>
                    </tr>
                    <tr>
                        <td>Cornish, David</td>
                        <td>17.6549</td>
                        <td>78510</td>
                        <td>25422</td>
             ...

JavaScript

$(document).ready(function () {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'pie',
                borderWidth: 1
            },
            data: {
                table: 'datatable'
            },
            title: {
                text: 'Percentage of Software Games Sold in 2011 Grouped by Publishers'
            },
            credits: {
                position: {
                    align: 'left',
                    x: 20
                },
                text: 'Source: vgchartz'
            },
            legend: {
                align: 'right',
                layout: 'vertical',
                verticalAlign: 'middle',
                itemMarginBottom: 4,
                itemMarginTop: 4,
                x: -40
            },
            plotOptions: {
                pie: {
                    showInLegend: true,
                    dataLabels: {
                        distance: -24,
                        color: 'white',
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function () {
                            return Highcharts.numberFormat(this.percentage) + '%';
                        }
                    }
                }
            }
        });
    });