JSFiddle - React, Tailwind, and code Playground

by padma rubhan

HTML

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

    <div class="piechart" style=""></div>

CSS

.piechart{
  min-width: 310px;
  height: 400px;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid;
}

JavaScript

$('.piechart').highcharts({
            chart: {
                spacingBottom: -8,
                spacingTop: -8,
                spacingLeft: -8,
                spacingRight: -8,
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: true,
                type: 'pie',
                width: null,
                height: null,
                backgroundColor: 'rgba(255, 255, 255, 0)',
            },
            title: {
                text: '100%',
                align: 'center',
                verticalAlign: 'middle',
                style: {
                    color: '#FFF',
                    fontSize: '18px',
                    fontFamily: 'arial'
                },
                y: 3,
                x: 20
            },
            credits: {
                enabled: false
            },
            tooltip: {
                enabled: false
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        useHTML: true,
                        formatter: function() {                                                 
                        },
                    },
                    states: {
                        hover: {
                            enabled: false,
                            brightness: 0
                        }
                    }
                },
                pie: {
                    borderWidth: 2,
                    borderColor: "#6821A5"
                }
            },
            series: [{
                name: " ",
                colorByPoint: true,
                data: [{
                    name: "Unrestricted",
                    y: 50,
                    color: '#6821A5',
                    tooltip: false
                }, {
                    name: "Restricted",
                    y: 100 - 50,
                    color: '#FFF',
            ...