Highcharts - Pie with Centered Value

author(s): Torstein Hønsi

by eklingen

HTML

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

<div style="padding:0;width:700;">
<div id="container1" style="height: 150px; width: 150px;display:inline-block;"></div>
<div id="container2" style="height: 150px; width: 150px;display:inline-block;"></div>
<div id="container3" style="height: 150px; width: 150px;display:inline-block;"></div>
<div id="container4" style="height: 150px; width: 150px;display:inline-block;"></div>
</div>

JavaScript

$(function() {
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Equities',
            y: 5,
            verticalAlign: 'bottom'
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                borderColor: '#000000',
                innerSize: '60%',
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            data: [
                ['Equities', 54],
                ['other', 46]
                ]}]
    },
    // using 

    function(chart1) { // on complete
        var xpos = '50%';
        var ypos = '50%';
        var circleradius = 40;

        // Render the circle
        chart1.renderer.circle(xpos, ypos, circleradius).attr({
            fill: '#ddd',
        }).add();

        // Render the text 
        chart1.renderer.text(chart1.series[0].data[0].percentage + '%', 62, 80).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();
    });

    var chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container2',
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Property',
            y: 5,
            verticalAlign: 'bottom'
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                borderColor: '#000000',
                innerSize: '60%',
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            data: [
...