JSFiddle - React, Tailwind, and code Playground

by samur3

HTML

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

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

<div>
    <div id="container" style="position:absolute; left:0px; top:0px;"></div>
    <div id="addText" style="position:absolute; left:0px; top:0px;"></div>
</div>

JavaScript

// Create the chart
 Highcharts.setOptions({
     colors: ['#2ADE73','#FF872E','#FCD01C','#3F5CEE','#E91E63',
                    '#A694FA','#2196F3','#90C6FF','#471C56','#FF5E43',      
              '#6AF9C4']
    });
var chart = new Highcharts.chart('container', {
    chart: {
        type: 'pie',
        marginLeft: -250,
         events: {
              
                }
    },
    title: {
        text: 'Data Source Coverage',
        align: 'left',
        style: {
            color: 'black',
            fontWeight: 'bold',
            fontSize:'24px'
        },
        x: 70
    },
   // subtitle: {
     //   text: 'Click the slices to view versions. Source: netmarketshare.com.'
    //},
     legend: {
        align: 'right',
        verticalAlign: 'middle',
        layout: 'vertical',
        symbolRadius: 0,
        floating: true,
        width:180,
        //x: -10,
        y: 30
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: false,
                format: '{point.name}: {point.y:.1f}%'
            }
        },
         pie: {                
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
                
            }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },
    
    series: [{
        name: 'Data Sources',
         size: '80%',
        colorByPoint: true,
        
        innerSize: '90%',
        data: [{
            name: 'Microsoft Internet',
            y: 56.33,
            drilldown: 'Microsoft Internet'
        }, {
            name: 'Chrome',
            y: 24.03,
            drilldown: 'Chrome'
        }, {
            name: 'Firefox',
            y: 10.38,
            drilldown: 'Firefox'
        }, {
      ...