Place text in center of pie chart - Highcharts

Question

I would like to place a title in the center of a pie/donut chart in HighCharts.

I don\'t see anything in the chart options that would directly enable this, so I\'m t

Answer 1

Just add the following.

title: { text : 'title to display in the middle' verticalAlign: 'middle', y: 5 },

Answer 2

Use this code to center chart title vertically:

title: {
    verticalAlign: 'middle',
    floating: true
}

Example

Edit

Since version 2.1 The floating property can be omitted as the documentation states it is implied by the presence of the verticalAlign property

When a value is given, the title behaves as floating.

Answer 3

I found this works when there is a legend and you set the text you want in the centre of the chart as the title:

events: {
    load: function() {
        const titleHeight = this.title.getBBox().height;
        this.title.attr({
            y: this.plotHeight / 2 + titleHeight / 2,
        });
    },
    redraw: function() {
        const titleHeight = this.title.getBBox().height;
        this.title.attr({
            y: this.plotHeight / 2 + titleHeight / 2,
        });
    },
},

Answer 4

First, you may want to check the html in your fiddle. You had a width on your container of 500 instead of 500px.

<div id="container" style="height: 400px; width: 500px"></div>​

Second, this fiddle is a bit quick and dirty, but I think it accomplishes what you wanted?

http://jsfiddle.net/e2qpa/3/

Answer 5

var newChart = new Highcharts.Chart(options);

//Set No data text
var textX = newChart.plotLeft + (newChart.plotWidth * 0.5);
var textY = newChart.plotTop + (newChart.plotHeight * 0.3);
var textWidth = 500;
textX = textX - (textWidth / 2);

newChart.renderer.label('<div style="width: ' + textWidth + 'px; text-align: center"><span>Dati non disponibili per questa selezione</span></div>', textX, textY, null, null, null, true)
        .css({
            fontSize: '16px',
        }).add();

Answer 6

You need to take into account the location of the chart, so if you use the 'left' and 'top' attributes, you can add on half the width of the plot and subtract half the width of your text bounding box. This would yield the exact center:

text = chart.renderer.text("My Text").add();
textBBox = text.getBBox();
x = chart.plotLeft + (chart.plotWidth  * 0.5) - (textBBox.width  * 0.5);
y = chart.plotTop  + (chart.plotHeight * 0.5) - (textBBox.height * 0.5);
text.attr({x: x, y: y});

Apparently the bounding box will be 0s unless you add it first.

Correction:

y = chart.plotTop  + (chart.plotHeight * 0.5) + (textBBox.height * 0.25);

So, my original thought, and this seemed fine, was that the text would be aligned by the upper left, however it is done by the bottom left instead. Thus, instead of subtracting half the height, we actually need to add it. What confuses me, and something I don't understand yet, is that to get the center you add only 25% of the height rather then 50%. Note: This does not appear to work on IE 7 or 8.

MAJOR UPDATE

http://jsfiddle.net/NVX3S/2/

<- Centered text that works in all browers

What this new update does is it adds a new element using jquery after the chart is done. This works in all browers that I have tested (including IE7, 8, 9, Firefox and Chrome).

var textX = chart.plotLeft + (chart.plotWidth  * 0.5);
var textY = chart.plotTop  + (chart.plotHeight * 0.5);

// The width and height need to be calculated properly, so I made it a span.
var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
span += '<span style="font-size: 32px">Upper</span><br>';
span += '<span style="font-size: 16px">Lower</span>';
span += '</span>';

$("#addText").append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5));
span.css('top', textY + (span.height() * -0.5));