ElementStacks

by supertrue

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px; width: 500"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'pie',
        animation: {
            duration: 200,
            //easing: 'easeOutBounce'
        }

    },
    
    plotOptions: {
        pie: {
            allowPointSelect: true,
            slicedOffset: 10,
            dataLabels: {
                distance: -40,
                color: 'white',
                formatter: function(){
                    return '<strong style="font-size:14px;">'+this.point.name+'</strong><br><span style="color:rgba(255,255,255,.6)">' + this.y +'%</span>';
                }
            }

        },
        
        series: {
            point: {
            events: {
                mouseOver: function(event) {
                    //alert(this.name);
                    this.select();
                },
                mouseOut: function(event) {
                    //alert(this.name);
                    this.select();
                },
                click: function() {
                    return false; // prevent selection
                }
                

            }
        }
    }

        
        
    },
    
    series: [{
        data: [
            {
                name: 'Firefox',   
                y: 44.2,
                selected: true,
                sliced: true
            },
            ['IE7',       26.6],
            ['IE6',       20],
            ['Chrome',    3.1],
            ['Other',    5.4]
        ]
    }]
});