JSFiddle - React, Tailwind, and code Playground

by ccarns

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 200px; width: 200px"></div>

JavaScript

$(function () {
    var colors = Highcharts.getOptions().colors;
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        plotOptions: {
            column: {
                colorByPoint: true
            }
        },
        colors: [
            '#009900',
            '#990000'],
        title: {
            text: 'Last Month'
        },
        plotOptions: {
            pie: {
                borderColor: '#fff',
                innerSize: '70%',
                dataLabels: {
                    enabled: false
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        series: [{
            name: 'Category',
            data: [
                ['Income', 75.00],
                ['Expense', 25.00]
            ]
        }]
    },

    // using 

    function (chart) { // on complete

        var xpos = '50%';
        var ypos = '50%';
        var circleradius = 50;

        // Render the circle
        chart.renderer.circle(xpos, ypos, circleradius).attr({
            fill: '#fff',
        }).add();

        // Render the text in the middle of the circle
        
    chart.renderer.text('85', 80, 130).css({
            width: circleradius*2,
            color: '#999',
            fontWeight: 'bold',
        fontFamily: 'Arial',        
            fontSize: '36px',
            textAlign: 'center'
      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999
        }).add();
        
    });
});