JSFiddle - React, Tailwind, and code Playground

by glsee

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: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Total Spending<br><b>$13,150.00</b>',
            align: 'center',
            verticalAlign: 'middle',
            y: -10
        },
        tooltip: {
            pointFormat: '${point.y}<br/>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                startAngle: 0,
                endAngle: 360
            }
        },
        series: [{
            type: 'pie',
            name: 'Spending',
            innerSize: '50%',
            data: [
                ['Housing',   6000],
                ['Transportation',       1200],
                ['Utilities', 1200],
                ['Food',    1750],
                ['Debt',     3000]
            ]
        }]
    });
});