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;
function colorBrightness(color, brightness) {
return Highcharts.Color(color).brighten(brightness).get();
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'pie',
borderWidth: 1
},
title: {
text: 'Number of Games Sold (in millions) in 2011',
},
credits: {
position: {
align: 'left',
x: 20
},
text: 'Source: vgchartz'
},
plotOptions: {
pie: {
dataLabels: {
style: {
width: '120px'
}
},
allowPointSelect: true
}
},
series: [{
name: 'Publishers',
innerSize: '18%',
size: '60%',
dataLabels : {
distance: -45,
color: 'white',
formatter: function() {
return this.point.name + ':<br/> ' + Highcharts.numberFormat(this.y / 1000000, 2);
},
style: {
fontWeight: 'bold'
}
},
data: [ { name: 'Nintendo', y: 54030288, color: "#4572A7" },
{ name: 'EA', y: 31367739, color: '#AA4643' },
{ name: 'Activision', y: 30230170, color: '#89A54E' } ]
}, {
name: 'Titles',
innerSize: '60%',
dataLabels: {
formatter: function() {
var str = '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.y / 1000000, 2);
...