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

JavaScript

$(function () {
        var chart;
        $(document).ready(function() {
            document.title = "Highcharts " + Highcharts.version;
            var pTxt = null;
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'column',
                    borderColor: '#a1a1a1',
                    borderWidth: 2,
                    borderRadius: 3,
		    width: 550,
                    marginTop: 120,
		    // marginRight: 20,
                    marginLeft: 10,
		    spacingBottom: 60,
		    options3d: {
			enabled: true,
			alpha: 25,
			beta: 30,
			depth: 30,
			viewDistance: 100
		    },
                    events: {
			drilldown: function(event) {
			    var point = event.point;
			    var chart = point.series.chart;
			    var renderer = chart.renderer;

			    if (point.name == 'Internet Explorer') {
				pTxt = renderer.text('9%', 
						     (chart.plotWidth / 2) + chart.plotLeft - 25, 
						     (chart.plotHeight / 2) + chart.plotTop + 25).
				    css({
					fontSize: '40px',
					fontFamily: 'Old Standard TT',
					fontStyle: 'italic',
					color: 'blue'
				    }).add();
			    }
			},
			drillup: function() {
			    pTxt && (pTxt = pTxt.destroy());
			}
                    }
                },
                title: {
                    text: 'Web browsers statistics access www.w3school.com - 2013',
                },
                credits: {
                    text: 'www.w3school.com'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: 'Percentage %',
			y: -80,
			x: 50
                    },
		    showEmpty: false,
                    min: 0,
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                       ...