ArticleZip > Highcharts Donut Chart Without Inner Pie

Highcharts Donut Chart Without Inner Pie

Are you looking to create a Highcharts donut chart without an inner pie slice? Whether you're a seasoned developer or just starting with data visualization, this article will guide you through the process step by step.

Firstly, why would you want to remove the inner pie slice in a donut chart? Well, it can be useful when you want to maximize the data space for the outer ring or simply prefer a cleaner design without the inner circle. Thankfully, Highcharts makes it quite simple to achieve this customization.

To create a donut chart without the inner pie slice using Highcharts, you need to modify the 'size' property in the 'plotOptions' section of your chart configuration. This property controls the size of the outer ring relative to the inner pie. By setting the 'innerSize' property to '0%', you essentially remove the inner circle, leaving you with a pure donut chart.

Here's a sample code snippet demonstrating how to achieve this:

Javascript

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Donut Chart Without Inner Pie'
    },
    plotOptions: {
        pie: {
            innerSize: '0%',
            size: '100%'
        }
    },
    series: [{
        name: 'Data Series',
        data: [
            ['Category 1', 25],
            ['Category 2', 35],
            ['Category 3', 20],
            ['Category 4', 10],
            ['Category 5', 10]
        ]
    }]
});

In the code above, we set 'innerSize' to '0%' and 'size' to '100%' to create a donut chart without the inner pie slice. You can customize the data series and labels according to your specific requirements.

Remember, while the inner pie slice is visually removed, the values and proportions of the data remain the same, ensuring accurate representation of your data in the chart.

Once you've implemented the code, you can further tweak the appearance of the chart by adjusting colors, labels, and other styling options offered by Highcharts' extensive customization features. Feel free to experiment with different configurations to achieve the desired look and feel for your donut chart.

In conclusion, creating a Highcharts donut chart without an inner pie slice is a straightforward process that can enhance the visual appeal and clarity of your data visualization. By following the steps outlined in this article and exploring further customization options, you can create compelling and informative charts tailored to your specific needs.