Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="vacation-time-chart" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {
    var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'vacation-time-chart',
            type: 'pie',
            height: 250,
            width: 250,
            borderRadius: 0
        },
        credits: {
            enabled: false
        },
        title: false,
        tooltip: false,
        plotOptions: {
            pie: {
                borderWidth: 6,
                startAngle: 90,
                innerSize: '55%',
                size: '100%',
                shadow: true,
                // {
                //     color: '#000000',
                //     offsetX: 0,
                //     offsetY: 2,
                //     opacity: 0.7,
                //     width: 3
                // },
                dataLabels: false,
                stickyTracking: false,
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                events: {
                    mouseOver: function(){
                        this.series.chart.innerText.attr({text: this.y});
                    }, 
                    mouseOut: function(){
                        this.series.chart.innerText.attr({text: 112});
                    }
                }
                }
            }
        },
        
        series: [{
            data: [
                {y:40, color: colors[0]},
                {y:0, color: colors[1]},
                {y:60, color: colors[2]}
            ]
            // data: [
            //     ['Firefox',   44.2],
            //     ['IE7',       26.6],
            //     ['IE6',       20],
            //     ['Chrome',    3.1],
            //     ['Other',    5.4]
            // ]
        }]
    },
     function(chart) { // on complete
        
        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;
    
    // Render the...