JSFiddle - React, Tailwind, and code Playground

by Janica Kaneshiro

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 () {
    
    Highcharts.setOptions({
     colors: ['#9ADCC6', '#44697D', '#4B306A', '#82786F', '#C59217']
    });
    var chart;

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                plotBackgroundColor: null,

                plotBorderWidth: null,

                plotShadow: false

            },

            title: {

                text: 'Causes of infant deaths in Indiana, 2011'

            },

            tooltip: {

                formatter: function() {

                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';

                }

            },

            plotOptions: {

                pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    dataLabels: {

                        enabled: true,

                        color: '#000000',

                        connectorColor: '#000000',

                        formatter: function() {

                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';

                        }

                    }

                }

            },

              series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Pre-term related causes', 45.7],
                ['Congnital anomalies', 26.3], 
                ['SIDS/SUID/accidents',    15.6],
                ['Assault/neglect', 1.4],
                ['Other', 11]
            

                ]

            }]

        });

    });
});