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-more.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
	<body>
  <div>
    <div id="container"></div>
  </div>
	</body>

JavaScript

document.title = "Highcharts " + Highcharts.version;

    $(document).ready(function() {
       var chart = null;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
		type: 'bubble',
		backgroundColor: '#ececec',
		width: 610
            },
            title: {
                text: "MLB Players Who Surpassed Breakout Seasons",
		align: 'left',
		margin: 25
            },
            xAxis: {
		tickInterval: 2,
		offset: -27,
		gridLineColor: '#d1d1d1',
		gridLineWidth: 1,
		lineWidth: 2,
		lineColor: '#7E7F7E',
		labels: {
		    y: 28
		},
		minPadding: 0.04,
		maxPadding: 0.15,
		title: {
		    text: 'Age when batters first posted 15+ WAR over two seasons'
		}
            },
            yAxis: {
                title: {
                    text: 'Percent who had a better two-year span',
		    rotation: 0,
		    align: 'high',
		    // Margin is negtive of the whole y label length to
		    // get the plot area underneath the title
		    margin: -240,
		    y: -10
                },
		labels: {
		    formatter: function() {
			return (this.value === 100) ? this.value + ' %' : this.value;
		    }
		},
		// This makes gives extra space at the top of y-axis
		// to show the bubble at the 100% level
		endOnTick: false,
		startOnTick: false
            },
            credits: {
                text: 'SOURCE: BASEBALL-REFERENCE.COM',
		href: 'http://fivethirtyeight.com/datalab/has-mike-trout-already-peaked/'
            },
            legend: {
                enabled: false
            },
            tooltip: {
	    },
            plotOptions: {
		bubble: {
		    minSize: 9,
		    maxSize: 30,
		    color: 'red'
		}
            },
            series: [{
		pointStart: 21,
                data: [
		    { y: 100, z: 1, 
		      name: 'Alex Rodriguez <br>in Seattle at age 21', 
		      dataLabels: {
			  enabled: true,
			  align: 'right',
			  verticalAlign: 'middle',
			  format: '<div style="float:left"><font...