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

$(document).ready(function() {
        document.title = "Highcharts " + Highcharts.version;
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'pie',
                borderWidth: 1
            },
            title: {
                text: 'Percentage of Software Games Sold in 2011 Grouped by Publishers',
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               text: 'Source: vgchartz'
            },
            legend: {
                align: 'right',
                layout: 'vertical',
                verticalAlign: 'middle',
                itemMarginBottom: 4,
                itemMarginTop: 4,
                x: -40
            },
            plotOptions: {
               pie: {
                   showInLegend: true,
                   dataLabels: {
                       distance: -24,
                       color: 'white',
                       style: {
                           fontWeight: 'bold'
                       },
                       formatter: function() {
                            return Highcharts.numberFormat(this.percentage) + '%';
                       }
                   }
               }
            },
            series: [{
                data: [ [ 'Nintendo', 54030288 ], [ 'Electronic Arts', 31367739 ],
                        [ 'Activision', 30230170 ], [ 'Ubisoft', 25318980 ],
                        [ 'Microsoft', 24372261 ], [ 'Sony Computer Entertainment', 13805937 ],
                        [ 'Bethesda Softworks', 10813372 ], [ 'Take-Two Interactive', 10012212 ],
                        [ 'Others', 33910911 ] ]
            }]
        });
    });