JSFiddle - React, Tailwind, and code Playground

by Raghu N

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="height: 300px"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'POC donut chart'
    },
    plotOptions: {
        pie: {
            innerSize: '70%',
            allowPointSelect: false, // come out slice
            dataLabels: {
                enabled: false
            },
            showInLegend: true,
						events: {
                click: function (event) {
                console.log(arguments, this);
                    alert(this.name + ' clicked\n' +
                    		'data ' + event.point.name + '\n' +
                        'Alt: ' + event.altKey + '\n' +
                        'Control: ' + event.ctrlKey + '\n' +
                        'Meta: ' + event.metaKey + '\n' +
                        'Shift: ' + event.shiftKey
                    );
                }
            }
        }
    },
    
    // data format: { y: 1, name: "Point2", color: "#00FF00" },
    series: [{
        name: 'Delivered amount',
        data: [{
        	color: "#459e0f",
          hoverColor: "#ffffff",
          name: "SUCCEEDED",
          sortKey: 1,
          y: 11056
        }, {
        color: "#ffd300",
        hoverColor: "#ffd300",
        label: "ABORTED",
        name: "ABORTED",
        sortKey: 4,
        value: 6,
        y: 6
        },
            ['Bananas', 8],
            ['Kiwi', 3],
            ['Mixed nuts', 1],
            ['Oranges', 6],
            ['Apples', 8],
            //['Pears', 4],
            //['Clementines', 4],
            ['Reddish (bag)', 1],
            //['Grapes (bunch)', 1]
        ]
    }],
    legend: {
      align: 'right',
      verticalAlign: 'middle',
      alignColumns: true,
      layout: 'vertical',
      x: -100
    },
    tooltip: {
        shared: true,
        useHTML: true,
        headerFormat: '',
        pointFormat: '{point.name} - <b>{point.y}</b>',
        //footerFormat:...