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.

Highcharts Place text in the center of a pie chart
Highcharts Place text in the center of a pie chart

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.

Highcharts Place text in the center of a pie chart
Highcharts Place text in the center of a pie chart

Source code


Photo from Unsplash

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Mock useSearchParams react testing library

Mock useSearchParams react testing library

To mock the useSearchParams hook from react-router-dom, you can use Jest’s mock function to provide a mocked implementation for the hook. For example: Consider we’ve a URL…

Leave a Reply

%d bloggers like this: