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: -43,
		*/
		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: {
		    step: 5
		},
		tickInterval: 25,		
		tickColor: '#d1d1d1',
		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,
		maxPadding: 0.04,
		minPadding: 0.04,
		startOnTick: false,
		*/
            },
            credits: {
                text: 'SOURCE: BASEBALL-REFERENCE.COM',
		href: 'http://fivethirtyeight.com/datalab/has-mike-trout-already-peaked/'
            },
            legend: {
                enabled: false
            },
            tooltip: {
	    },
            plotOptions: {
            },
            series: [{
		pointStart: 21,
                data: [
		    [ 100, 1 ],
		    [ 50, 5 ],
		    [ 50, 6 ],
		    [ 46, 8 ],
		    [ 22, 6 ],
		    [ 18, 3 ],
		    [ 0, 8 ],
		    [ 35, 3 ],
		    [ 39, 6 ],
		    [ 50, 2 ],
		    [ 18, 5 ],
		    [ 0, 2 ],
		    [ 0, 1 ]
                ]
           }]
        });

       });