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: 'Number of Games Sold in 2011',
},
credits: {
position: {
align: 'left',
x: 20
},
text: 'Source: vgchartz'
},
plotOptions: {
pie: {
slicedOffset: 20,
allowPointSelect: true,
size: '75%',
dataLabels: {
style: {
width: '140px'
},
formatter: function() {
var str = this.point.name + ': ' + Highcharts.numberFormat(this.y, 0);
return str;
}
}
}
},
series: [{
center: [ '25%', '50%' ],
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 ] ]
}, {
center: [ '75%', '50%' ],
dataLabels: {
formatter: function() {
return this.point.name + ': ' + Highcharts.numberFormat(this.percentage, 0) + '%';
}
},
data: [ [ 'Xbox', 80627548 ], [ 'PS3', 64788830 ], [ 'Wii', 51658180 ],
[ 'DS',...