JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

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

JavaScript

$(function () {
    var iterator = 0,
        colors = ['red', 'blue'];
    $('#asset_class').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'bottom',
            backgroundColor: '#f3f3f3',
            borderWidth: 0,
            useHTML: true,
            itemMarginBottom: 10,
            labelFormatter: function () {
                ++iterator;
                return '<div style="width:200px;color:' + colors[iterator % 2] + '"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.percentage.toFixed(0) + '%</span><span style="float:right; margin-right:15%">$' + Highcharts.numberFormat(this.y, 0) + '</span></div>';
                
            }

        },
        plotOptions: {
            series: {
                shadow: {
                    color: '#cecece',
                    opacity: 0.75,
                    width: 3,
                    offsetY: 2,
                    offsetX: 2
                }
            },
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        tooltip: {
            valuePrefix: '$'
        },
        series: [{
            name: 'Asset Class',
            data: [{
                name: 'US Bond',
                color: '#0e2625',
                y: 20000
            }, {
                name: 'Intl Bond',
                color: '#274e4c',
                y: 20000
            }, {
                name: 'US Stock',
                color: '#335f2b',
                y: 10000
            }, {
                name: 'Intl Stock',
                color: '#4b8f4a',
                y: 15000
            }, {
                name: 'Alternatives',
        ...