Highcharts Place text in the center of a pie chart

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.

Source code

---

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.

Source code

---

Photo from Unsplash