Clever Geek Handbook

How to dynamically center the position of a chart title within a pie chart in tall charts

I am making a responsive pie chart that keeps the title centered inside. I used

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

but it is not ideally located within the diagram Any suggestions will be appreciated. Thanks in advance.

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

+3


source to share


2 answers


Better to remove the title and use a renderer that allows you to add custom text that can be changed every time (when you redraw the diagram). Only what you need is to 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/

+2


source


We can set any title properties with chart.setTitle () as shown below. I added a title and set the useHTML property to true.



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


source






More articles:


All Articles