How to change the size of the doughnut hole in JavaScript Chart?

You can customize the size of doughnut hole and the doughnut size by using doughnutCoefficient property and doughnutSize property respectively with respect to chart size.

Doughnut size

Doughnut series supports doughnutSize property that controls the size of the doughnut series with respect to the available size. Doughnut series takes the entire chart space when doughnutSize is 1, it takes value from 0 to 1. By default the value of doughnutSize is 0.8

JS

<div id="container"></div>
<script type="text/javascript">
$(function () {
    $("#container").ejChart({ 
        series: [{
            type: 'doughnut', doughnutSize:0.7
            . . . . . 
        }],
        . . . . .
    });
});

JS Playground link: Doughnut Size

The following screenshot displays doughnut chart with doughnut size 0.7

Doughnut Coefficient

Doughnut charts are pie charts with a hole at center, whose value is specified using doughnutCoefficient property. It takes values from 0 to1. By default the value of doughnutCoefficient is 0.4

JS

<div id="container"></div>
<script type="text/javascript">
$(function () {
    $("#container").ejChart(
    {
        series: [{
            type: 'doughnut', doughnutCoefficient:0.6
            . . . . . .
        }],
        . . . . . .
    });
});

JS Playground Link: Doughnut Coefficient

The following screenshot displays doughnut chart with doughnut coefficient 0.6

Conclusion

I hope you enjoyed learning about how to change the size of the doughnut hole in JavaScript Chart.

You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our JavaScript Chart documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!