JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts-3d.js"></script>
	<body>
    <div id="container"></div>
	</body>

JavaScript

$(function () {
    $(document).ready(function() {
        document.title = "Highcharts " + Highcharts.version;

        var orgColors = Highcharts.getOptions().colors;
	Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
            return {
		radialGradient: {
                    cx: 0.4,
                    cy: 0.3,
                    r: 0.5
		},
		stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
		]
            };
	});

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                borderWidth: 1,
                type: 'scatter',
                marginTop: 95,
                marginLeft: 35,
		marginRight: 35,
                spacingBottom: 25,
                options3d: {
                    alpha: 20,
                    beta: 20,
                    enabled: true
                }
            },
            title: {
                text: 'Exports (% of GDP) vs Imports (% of GDP)'
            },
	    subtitle: {
		text: null
	    },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               text: 'Source: World Bank'
            },
            tooltip: {
                crosshairs: [ { width: 2, color: '#B84DDB' },
			      { width: 2, color: '#B84DDB' },
			      { width: 2, color: '#B84DDB' } ],
                formatter: function() {
                    var color = orgColors[this.series.index];
                    return '<span style="color:' + color + '">\u25CF</span> ' + 
                           this.series.name + ' - In <b>' + this.point.x + 
                           '</b>: Exports: <b>' + this.point.y + 
                           '%</b>, Imports: <b>' + this.point.z + '%</b><br/>';
                },
                shape: 'square',
                positioner: function(width, height, point) {
            ...