To place text in the center of a pie chart in Highcharts, you can use the chart.renderer
object to create a custom label and position it in the center of the chart.
Example 1:
Here’s an example code snippet that demonstrates how to add a label to the center of a pie chart:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
events: {
render: function () {
// Get chart center coordinates
var centerX = this.plotWidth / 2;
var centerY = this.plotHeight / 2;
// Create the label
var label = this.renderer
.label('Center Text', centerX, centerY)
.css({
color: '#000',
fontSize: '16px',
})
.attr({
fill: 'rgba(255, 255, 255, 0.75)',
padding: 8,
r: 5,
})
.add();
// Position the label in the center of the chart
var labelBox = label.getBBox();
label.translate(centerX - labelBox.width / 2, centerY - labelBox.height / 2);
},
},
},
plotOptions: {
pie: {
innerSize: '60%',
},
},
title: {
text: '',
},
series: [
{
data: [
['Firefox', 2262],
['IE7', 3800],
['IE6', 1000],
['Chrome', 1986],
],
},
],
});
In this example, we are using the render
event to create a custom label using the chart.renderer
object. The centerX
and centerY
variables are used to calculate the center coordinates of the chart. The label is then created with the desired text, style, and attributes, and positioned in the center of the chart using the translate
method.

Example 2:
Another example is by using the title
object property:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
},
plotOptions: {
pie: {
innerSize: '60%',
},
},
title: {
verticalAlign: 'middle',
floating: true,
text: 'center text',
},
series: [
{
data: [
['Firefox', 2262],
['IE7', 3800],
['IE6', 1000],
['Chrome', 1986],
],
},
],
});
The above example, specifies the title text, its position, and other related options. The verticalAlign
option is set to middle
, which positions the title vertically in the center of the chart. The floating
option is set to true
, which allows the title to move freely within the chart area. The text
option specifies the content of the title.

Photo from Unsplash