How to center chart title position dynamically ins

Question

I'm doing a responsive pie chart which holds title in centered position inside it.I've used,

title: {
            text: "",
            margin: 0,
            y:0,
            x:0,
            align: 'center',
            verticalAlign: 'middle',
        },

but it's not perfectly centered inside the chart.Any suggestions would be appreciated.Thank you in advance.

Here's the Link : http://jsfiddle.net/LHSey/128/

Answer 1

Better is remove title and use renderer which allows to add custom text, which can be repositioned each time (when you redraw chart). Only what you need is catch this event.

function addTitle() {

        if (this.title) {
            this.title.destroy();
        }

        var r = this.renderer,
            x = this.series[0].center[0] + this.plotLeft,
            y = this.series[0].center[1] + this.plotTop;
        this.title = r.text('Series 1', 0, 0)
            .css({
            color: '#4572A7',
            fontSize: '16px'
        }).hide()
            .add();

        var bbox = this.title.getBBox();
        this.title.attr({
            x: x - (bbox.width / 2),
            y: y
        }).show();
    }

chart:{
    events: {
                    load: addTitle,
                    redraw: addTitle,
            },
} 

Example: http://jsfiddle.net/LHSey/129/

Answer 2

We can customize any properties of title using chart.setTitle() as shown below.I've added a title and set useHTML property to true.

chart: {
            events: {
                    load: function () {
                        this.setTitle({text: 'Title',useHTML:true});
                    } 
            }
    }