score:5

Accepted answer

i encountered the same problem, and found this solution via highcharts support forum : http://highcharts.uservoice.com/forums/55896-general/suggestions/3073133-pie-title

the highcharts dude has written a plugin that you can see working on the following jsfiddle : http://jsfiddle.net/highcharts/tnsra/

i have copy-pasted this plugin in a highcharts-plugins.js file that i included in my website, works like a charm!

here's the plugin code :

/**
 * pie title plugin
 * last revision: 2012-12-21
 */
(function (highcharts) {
    highcharts.wrap(highcharts.seriestypes.pie.prototype, 'render', function (proceed) {

        var chart = this.chart,
            center = this.center || (this.yaxis && this.yaxis.center), 
            titleoption = this.options.title,
            box;

        proceed.call(this);

        if (center && titleoption) {
            box = {
                x: chart.plotleft + center[0] - 0.5 * center[2],
                y: chart.plottop + center[1] - 0.5 * center[2],
                width: center[2],
                height: center[2]
            };
            if (!this.title) {
                this.title = this.chart.renderer.label(titleoption.text)
                    .css(titleoption.style)
                    .add()
                    .align(titleoption, null, box);
            } else {
                this.title.align(titleoption, null, box);
            }
        }
    });

}(highcharts));

and this is how you configure your title (put this in your series elements) :

title: {
            // align: 'left',
            // x: 0
            // style: { color: xxx, fontstyle: etc }
            text: '<b>pie 1</b><br>subtext',
            verticalalign: 'top',
            y: -40
        },

score:1

you can use renderer which allows to add text in any place.

http://api.highcharts.com/highcharts#renderer.text()

score:1

improving on vincent's answer. this is how i used it for simple text titles.

extendhighcharts = function(){
        highcharts.wrap(highcharts.seriestypes.pie.prototype, 'render', function (proceed) {

            //clear the title if added previously
            //if your chart data does not change, this reference storage for removal can be left out
            if(this.chart.subcharttitleelement){                            
                this.chart.subcharttitleelement[this.id].destroy();
            }   

            proceed.call(this);


            if (this.center && this.options.title) {


                //first, add the title, at center or anywhere, we need the container width to center it
                this.chart.subcharttitleelement[this.id] = this.chart.renderer.text(this.options.title.text,this.center[0],this.center[1]);
                this.chart.subcharttitleelement[this.id].css(this.options.title.style)
                this.chart.subcharttitleelement[this.id].add();

                //center the title using the container(bounding box = bbox) width
                var xcenter = this.chart.plotleft + this.center[0] - (this.chart.subcharttitleelement[this.id].getbbox().width/2),
                    ycenter = this.chart.plottop + this.center[1] - 0.6 * this.center[2];

                this.chart.subcharttitleelement[this.id].attr(
                                 {
                                     x:xcenter,
                                     y:ycenter
                                 }
                );

                }
            }); 
     }

usage

                    this.chart.addseries({
                        type: 'pie', 
                        name: 'pie_chart_1',
                        data: piechartdata,
                        center: ['80%','25%'],
                        size: '35%',
                        showinlegend: false,
                        datalabels: {
                            enabled: false
                        },

                        //this part adds the relevant information
                        title: {
                            text:'pie chart title',
                            verticalalign: 'top',
                            y: -40
                        },
                        id:'a_unique_id_or_name'
                    }); 

score:2

to further improve on this, the code below correctly handles left, center, and right justification for the titles. see fiddle at http://jsfiddle.net/9y4lj4yr/ for an example.

    /**
* pie title plugin
* last revision: 2015-5-20
*/
(function (highcharts) {
    highcharts.wrap(highcharts.seriestypes.pie.prototype, 'render', function (proceed) {

        var chart = this.chart,
        center = this.center || (this.yaxis && this.yaxis.center),
        titleoption = this.options.title,
        box;

        proceed.call(this);

        if (center && titleoption) {
            box = {
                x: chart.plotleft + center[0] - 0.5 * center[2],
                y: chart.plottop + center[1] - 0.5 * center[2],
                width: center[2],
                height: center[2]
            };
            if (!this.title) {
                this.title = this.chart.renderer.label(titleoption.text)
                .css(titleoption.style)
                .add()
            }
            var labelbbox = this.title.getbbox();
            if (titleoption.align == "center")
                box.x -= labelbbox.width/2;
            else if (titleoption.align == "right")
                box.x -= labelbbox.width;
            this.title.align(titleoption, null, box);
        }
    });

} (highcharts));

Related Query

More Query from same tag