JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="http://rcb.com.mt/wordpresstesting/graphs/new-version/highcharts.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container5" style="height: 370px; width:300px"></div>

JavaScript

$(function () {
    $('#container5').highcharts({
								
        chart: {
            type: 'pie',
            options3d: {
				enabled: false,
                alpha: 0
            }
        },
		
		colors: ['#081969', '#0e2569', '#1e3b81', '#284893', '#30509b'],
        title: {
            text: ''
        },tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                innerSize: 130,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: [
                ['31%', 31],
                ['25%', 25],
                ['22%', 22],
                ['15%', 15],
                ['7%', 7]
			],
            size: '60%',
            dataLabels: {
                    formatter: function() {
                        return this.y
                    },
                    distance:10
                }
        },{
            name: 'Delivered amount',
            data: [
                ['3', 31],
                ['2', 25],
                ['2', 22],
                ['5', 15],
                ['7', 7]
			],
            size: '60%',
            dataLabels: {
                    formatter: function() {
                        return this.point.name
                    },
                    color: 'white',
                    distance:-10
                }
        }]
    });
});