JSFiddle - React, Tailwind, and code Playground

by no1uknow

HTML

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

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

JavaScript

$(function () {
    container_chartFreqAtaTailNum = new Highcharts.Chart({
        chart: {
            
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
                        
            },
        title: {
            text: 'Frequency by Tail Number'
        },
        subtitle: {
            text: 'Analyst ATA (32)'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            floating: false,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true,
            labelFormatter: function() {
                return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">   Total: ' + this.options.total + '</span>';
            }
        },
        credits: {
            enabled: false
        },
        exporting: { 
            enabled: false 
        },
        series: [{
            type: 'pie',
            name: 'Chart',
            data: [['204', 1],['224', 2],['235', 4],['245', 2],['402', 11],['411', 2],['432', 11],['442', 3],['703', 2],['714', 4],['720', 9],['730', 2],['745', 6],['756', 1],['767', 7],['772', 5],['792', 6],]
        }]
    });
});