JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

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

<div id="chart1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
//	Highcharts.setOptions({
//     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
//    });
    $('#chart1').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
		
        title: {
            text: 'Connection Status'
        },
        tooltip: {
    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
		plotOptions: {
            pie: {
				allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    distance: -18,
                    style: {
                      // fontWeight: 'bold',
					  fontSize:'10px',
                       color: 'white',
                       textShadow: '0px 1px 2px black'
                   },
                    formatter: function() {
                        return this.percentage +' %';
                    }
                },
				showInLegend: true
                //startAngle: -90,
                //endAngle: 90,
               // center: ['50%', '50%']
            }
        },
        series: [{
            type: 'pie',
            name: 'Connection Status',
			innerSize: '50%',
            data: [
				{
                        name: 'Online',
                        y: 180,
                        color: '#5CB85C'
                },
				{
                        name: 'Offline',
                        y: 20,
                        color: '#ccc'
                }
            ]
        }]
    });
});