Highcharts Demo

author(s): Torstein Hønsi

by anoopsuda

HTML

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

<div id="container" style="height:400px; width: 500px"></div>

JavaScript

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },

        plotOptions: {
            pie: {
                borderColor: '#fff',
                innerSize: '70%'
            }
        },
        series: [{
           /* data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
                ] */
                showInLegend:true,
                data: [
                {name: 'Implemented', y: 12, color: 'yellow'},
                {name: 'In Process', y: 10, color: 'red' },
                {name: 'Reject', y: 33, color: 'blue'},
                {name: 'Review', y: 20, color: 'green'}
            ]
                
                }]
    },
    // using 
                                     
    function(chart) { // on complete
        
        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;
    
    // Render the circle
    chart.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#fff',
    }).add();

    // Render the text 
    chart.renderer.text('<span style="color: red">260</span>', 155, 215).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '16px',
            textAlign: 'center'
      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999
        }).add();
    });
});