JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

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

<div id="myChart" style="min-width: 400px; height: 400px;"></div>

JavaScript

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'myChart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Demo PieChart'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                     return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                }
            }
        },
        series: [{
                type: 'pie',
                name: 'Item Share',
                data: [
                    ['A',   45.0],
                    ['B',       26.8],
                    {
                        name: 'Amar',
                        y: 12.8,
                        sliced: false,
                        selected: true
                    },
                    ['Pranay',    8.5],
                    ['Sourav',     6.2],
                    ['Anurag',   0.7]
                ]
        }]
    });
});