JSFiddle - React, Tailwind, and code Playground

by zachpainter77

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: 0 auto"></div>

JavaScript

$(function () {
    var data = "Badger,186,Bald Eagle,6,Bear,1,Beaver,18,Bighorn Sheep,86,Bird,11,Black Bear,156,Black-Tailed Deer,29680,Bobcat,84,Cougar,17,Coyote,98,Crow,1,Deer,2251,Elk,2958,Fisher,1,Fox,6,Golden Eagle,2,Grizzly Bear,3,Gull,1,Hawk,6,Jackrabbit,2,Mink,2,Moose,200,Mountain Beaver,2,Mule Deer,31600,Muskrat,5,Nutria,1,Other,987,Otter,16,Owl,16,Porcupine,22,Rabbit,7,Raccoon,264,Red-Tailed Hawk,1,Skunk,8,Turkey,6,Turkey Vulture,2,Weasel,1,White-Tailed Deer,32771,Wolf,4"
    var data = data.split(",");
    chartData = [];
    for(x = 0; x < data.length; x += 2){
     chartData[x/2] = {
        name: data[x],
        y: parseInt(data[x+1])
     }; 
    }
    
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Carcass Removals All Time'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.01f}%</b>'
        },
        plotOptions: {
            pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            
        },
        series: [{
            name: 'Carcass Removals',
            colorByPoint: true,
            data: chartData
        }]
    });
});