Highcharts Doughnut with anything in middle

by Ben Clayton

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<h1>Graph in Graph</h1><hr><hr>
<div style="position:relative;">
    <div id="container" style="position:absolute; left:0px; top:0px;"></div>
    <div id="addText" style="position:absolute; left:0px; top:0px;"></div>
</div>

JavaScript

$(function() {
    new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        plotOptions: {
            pie: {
                innerSize: '60%'
            }
        },
        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
                ]}]
    },
                                     
    function(chart) { // on complete
        var pie_centerX = chart.plotLeft + (chart.plotWidth  * 0.5);
        var pie_centerY = chart.plotTop  + (chart.plotHeight * 0.5);

        var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
         span += '</span>';

        $("#addText").append(span);
        span = $('#pieChartInfoText');
        span.css('left', pie_centerX + (150 * -0.5));
        span.css('top', pie_centerY + (150 * -0.5));
    });
    
    new Highcharts.Chart({
        chart: {
            renderTo: 'pieChartInfoText',
            type: 'column',
            width:150,
            height:150,
            
            backgroundColor: ''
            
        },
        title:{text:''},
        plotOptions: {
            column:{
                colorByPoint:true
            }
        },
        legend:{enabled:false},
        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
                ]}]
    });

    
    
});