Pie Chart: Dynamic Connector (4)

Tooltip in the center of the pie chart

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="position:relative;min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="messages">
    <ul></ul>
</div>

JavaScript

$(function () {
    $(document).ready(function () {
        var chart = null;

        var colors = Highcharts.getOptions().colors,
            categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
            name = 'Browser brands',
            data = [{
                y: 55.11,
                color: colors[0],
                
            }, {
                y: 21.63,
                color: colors[1],
                
            }, {
                y: 11.94,
                color: colors[2],
               
            }, {
                y: 7.15,
                color: colors[3],
                
            }, {
                y: 2.14,
                color: colors[4],
                
            }];


        // Build the data array
        var browserData = [];
        for (var i = 0; i < data.length; i++) {

            // add browser data
            browserData.push({
                name: categories[i],
                y: data[i].y,

            });

        }

        // Create the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'pie'
            },
            title: {
                text: null
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            series: [{
                name: 'Browsers',
                data: browserData,
                innerSize: '40%'
            }],
            tooltip: {
                valueSuffix: '%',
                positioner: function () {
                    return {
                        x: this.chart.series[0].center[0] - (this.label.width / 2) + 8,
                        y: this.chart.series[0].center[1] - (this.label.height / 2) + 8
                    };
                }
            },
            plotOptions: {
                pie: {
                    cursor: 'pointer',
                   ...