JSFiddle - React, Tailwind, and code Playground

by core972

HTML

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

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

JavaScript

Highcharts.chart('container1', {
    chart: {
        type: 'pie'
    },
    credits: {
        enabled: false
    },
    exporting: {
        buttons: {
            contextButton: {
                enabled: false
            }
        }
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },

    plotOptions: {
        series: {
            allowPointSelect: false,
            cursor: 'pointer',
            dataLabels: {
                inside: true,
                formatter: function() {
                    return (this.y);
                },
                color:'white',
                distance: -30
            },
              showInLegend:true
        }
    },
   legend: {
        x: -15,
        y: 10,
        symbolHeight: .001,
        symbolWidth: .001,
        symbolRadius: .001,
        itemStyle: {
            fontSize:'12px',
            font: '10pt',
            color: '#666666',
            fontWeight: 'normal',
         },
    },
    series: [{
        colorByPoint: true,
        data: [{
            name: Aug,
            y: 74
        }],
        center: [40, 5],
        size: 50,
    }, {
        colorByPoint: true,
        data: [{
           name: Sep,
            y: 94
        }],
        center: [100, 5],
        size: 50
    }]
});