JSFiddle - React, Tailwind, and code Playground

by markwan

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
    
</figure>

JavaScript

// Build the chart
Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: "#f5f5f5",
        backgroundColor: '#f5f5f5',
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    tooltip: {
        enabled: false
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            
            showInLegend: true,           
            
            
        }
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      itemMarginBottom: 15,      
      x: 0,
      y: 150
    },
    series: [{
        name: 'Members',
        colorByPoint: true,
        data: [
        
        	 {
            name: 'Total Members: 1.000.000',
            y: 450000,
            color: "#393f4e",
            borderWidth: 1,
            borderColor: '#f5f5f5',
            dataLabels: {
                enabled: false,
                            
            }
        },
        {
            name: 'Targeted Members: 550.000',
            y: 550000,
            sliced: true,
            borderWidth: 15,
           
            borderColor: 'white',
            color: "#34b9d5",
            dataLabels: {
                enabled: true,
                format: '<b>{point.percentage:.0f}%</b>',
                distance: -70, 
                style: {
                    fontSize: 30
                }
            }
           
        }]
    }]
});