Donut Inner Text

Question

I developed a donut chart using highchart library. I need to include a label in the inner part of the donut.

Expected Result:

JS:

$(function () {
    $('#container8').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: false,
                alpha: 0
            }
        },
        colors: ['#081969', '#0e2569', '#1e3b81', '#284893', '#30509b'],
        title: {
            text: ''
        },tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                innerSize: 140,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: [
                ['56%', 56],
                ['44%', 44]
            ]
        }]
    });
});

Fiddle can be found here: http://jsfiddle.net/ak9jK/

Answer 1

title: {
        style: {
            fontSize: '48px',
            fontWeight: 'bold'
        },
        verticalAlign: 'middle'
    },

AND at the end

},

function (chart) {
    chart.setTitle({
        text: chart.series[0].data[0].y + '%'
    });
});

DEMO: http://jsfiddle.net/ak9jK/1/

Related questions:
Highcharts Donut Chart text in center change on hover
Place text in center of pie chart - Highcharts

Answer 2

You can use Renderer which allows to add custom text.