Chapter 5: Configuring Pie Chart with Sliced Off Sections (2)

Same as previous chart with multiple slices apart

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px; " id='container'></div>
</body>

JavaScript

$(document).ready(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'pie',
                borderWidth: 1
            },
            title: {
                text: 'Number of Software Games Sold in 2011 Grouped by Publishers',
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               text: 'Source: vgchartz'
            },
            plotOptions: {               pie: {
                   allowPointSelect: true,
                   dataLabels: {
                       formatter: function() {
                            var str = this.point.name + ': ' + Highcharts.numberFormat(this.y, 0);
                            var words = str.split(' '), label = '';
                            $.each(words, function(idx, word) {
                                label = (label.length + word.length > 25) ? 
                                           label + '<br/> ' + word : label + ' ' + word;
                            });
                            return label;
                       }
                   }
               }
            },
            series: [{
                data: [ { name: 'Nintendo', y: 54030288, sliced: true, dataLabels: { style: { fontWeight: 'bold' } } }, [ 'Electronic Arts', 31367739 ],
                        [ 'Activision', 30230170 ], [ 'Ubisoft', 25318980 ],
                { name: 'Microsoft', y: 24372261, sliced: true, dataLabels: { style: { fontWeight: 'bold' } } },
                        [ 'Sony Computer Entertainment', 13805937 ],
                        [ 'Bethesda Softworks', 10813372 ], 
                { name: 'Take-Two Interactive', y: 10012212, sliced: true, dataLabels: { style: { fontWeight: 'bold' } } },
                        [ 'Others', 33910911 ] ]
            }]
        });
    });