javascript - How to center chart title position dynamically inside pie chart in highcharts - Stack Overflow

admin管理员组

文章数量:1355014

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 : /

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/LHSey/128/

• javascript
• highcharts
• alignment
• title
• pie-chart

Share Improve this question Follow asked Jan 8, 2015 at 8:26 ArunArun 13111 gold badge44 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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/LHSey/129/

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});
                    } 
            }
    }

本文标签： javascriptHow to center chart title position dynamically inside pie chart in highchartsStack Overflow