JSFiddle - React, Tailwind, and code Playground

HTML

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

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

JavaScript

$(function() {
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },

        credits: {
            enabled: false
        } ,
        legend: {

            symbolHeight: 1,
            symbolWidth: 1,
            symbolRadius: 0,
            useHTML: true,
            align: 'right',
            verticalAlign: 'top',
            itemWidth: 100,
            layout: 'vertical',
            x: 0,
            y: 100,
            labelFormatter: function() {

                return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
            }
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                events: {
                    legendItemClick: function(event) {
                        alert(this.name +'2 clicked\n'+
                              'Alt: '+ event.altKey +'\n'+
                              'Control: '+ event.ctrlKey +'\n'+
                              'Shift: '+ event.shiftKey +'\n');
                    },
                    click: function(event) {
                        alert(this.name +' clicked\n'+
                              'Alt: '+ event.altKey +'\n'+
                              'Control: '+ event.ctrlKey +'\n'+
                              'Shift: '+ event.shiftKey +'\n');
                    }
                }
            }
        },
        tooltip: {
            enabled: false,
            shadow: false
        },
        series: [{
            states: {
                hover: {
                    enabled: false
                }
            },
            showInLegend: true,
            name: 'election result',
            enabled: true,
            dataLabels: {
                enabled: true
            },
           ...