JSFiddle - React, Tailwind, and code Playground

by muris2016

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="asset_allocation_bottom_left_div" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

CSS

.datalabelInside {
    position:absolute;
}
#datalabelInside1 {
    color:#fff;
    left:-150px;
}

JavaScript

$(function () {
    var asset_allocation_pie_chart = new Highcharts.Chart({
        chart: {
            renderTo: 'asset_allocation_bottom_left_div'
        },
        title: {
            text: 'Current Asset Allocation',
            style: {
                fontSize: '17px',
                color: 'red',
                fontWeight: 'bold',
                fontFamily: 'Verdana'
            }
        },
        subtitle: {
            text: '(As of ' + 'dfdf' + ')',
            style: {
                fontSize: '15px',
                color: 'red',
                fontFamily: 'Verdana',
                marginBottom: '10px'
            },
            y: 40
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 0
        },
        plotOptions: {
            pie: {
                size: '80%',
                cursor: 'pointer',
                data: [
                    ['Investment Grade Bonds', 100],
                    ['High Yield Bonds', 200],
                    ['Hedged Equity', 300],
                    ['Global Equity', 400],
                    ['Cash', 500]
                ]
            }
        },
        series: [{
            type: 'pie',
            name: 'Asset Allocation',
            dataLabels: {
                verticalAlign: 'top',
                enabled: true,
                color: '#000000',
                connectorWidth: 1,
                distance: -30,
                connectorColor: '#000000',
                formatter: function () {
                    return Math.round(this.percentage) + ' fds';
                }
            }
        }, {
            type: 'pie',
            name: 'Asset Allocation',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorWidth: 1,
                distance: 30,
                connectorColor: '#000000',
                formatter: function () {
                 ...