JSFiddle - React, Tailwind, and code Playground

by andy troy

HTML

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

<div id="roeContainer" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function () {

    $(document).ready(function () {

        // Build the chart
        var pie = new Highcharts.Chart({
        chart: {
            renderTo: 'roeContainer',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            width: 210,
            height: 175
        },
        credits: {
            enabled: false
        },
        title: {
            style: {
                fontSize: '30px'
            },
            text: '123',
            align: 'center',
            verticalAlign: 'middle',
            y: -15
        },
        tooltip: {
            pointFormat: '{series.name} : {point.percentage:.1f}%',
            formatter: function() {
                    var tooltipText;
                    if (this.point.name === 'Equity') {
                        return false;
                    } else {
                        tooltipText = ''+ this.point.name  + ': ' + this.y + '%';
                    }
                    return tooltipText;
                }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                innerSize: '88%',
                dataLabels: {
                    enabled: false,
                    format: '{point.name}<br>{point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [
            {
                type: 'pie',
                name: 'Return on Equity',
                data: [{ name: "Return on Equity", y: 6.9, color: '#FF0000' }, { name: " ", y: 93.1, color: "#eee" }]
            }
        ]
    });
    });
});