JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

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

JavaScript

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

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar',
                borderWidth: 1
            },
            title: {
                text: 'Number of Patents Granted',
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               href: 'http://www.uspto.gov',
               text: 'Source: U.S. Patent & Trademark Office'
            },
            xAxis: [{
                categories: [ 
                              '2001', '2002', '2003', '2004', '2005', 
                              '2006', '2007', '2008', '2009', '2010', '2011' ],
            }, {
                categories: [ 
                              '2001', '2002', '2003', '2004', '2005', 
                              '2006', '2007', '2008', '2009', '2010', '2011' ],
                opposite: true,
                linkedTo: 0,
            }],
            yAxis: {
                title: {
                    text: 'No. of Patents'
                },
                labels: {
                    formatter: function() {
                       return Highcharts.numberFormat(Math.abs(this.value), 0);
                    }
                }
            },
            plotOptions: {
			          series: {
				          stacking: 'normal'
			          }
		        },
            series: [{
                name: 'UK',
                data: [ 4351, 4190, 4028, 3895, 3553, 
                        4323, 4029, 3834, 4009, 5038, 4924 ]
                }, {
                name: 'China',
                data: [ -265, -391, -424, -596, -565,
                        -970, -1235, -1874, -2270, -3303, -3786 ]
            }]
        });
    });
    
});