JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    (function (H) {
        H.wrap(H.seriesTypes.pie.prototype, 'drawPoints', function (p) {
            var len = this.points.length,
                minRadius = 50, // in %
                maxRadius = 100, // in %
                step = (maxRadius - minRadius) / len;
            
            H.each(this.points, function (point, index) {
                if(point.shapeArgs) {
                    // update outer radius of slice: 
                    point.shapeArgs.r = point.shapeArgs.r * (100 - index * step) / 100;
                }
            });

            p.call(this);
        });
    })(Highcharts);

    var chart = new Highcharts.Chart({
        chart: {
            type: 'pie',
            renderTo: 'container'
        },
        series: [{
            dataLabels: {
                connectorWidth: 0
            },
            innerSize: 40,
            data: [50, 30, 20, 10, 5, 3]
        },{
            dataLabels: {
                connectorWidth: 0
            },
            innerSize: 40,
            data: [50, 30, 20, 10, 5, 3]
        }]
    });

});