JSFiddle - React, Tailwind, and code Playground
by lchau
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
var chart,
dataset = [{
name: "Art",
y: 115801
}, {
name: "Art",
y: 115801
}, {
name: "Properties",
y: 381408
}, {
name: "Jewelry",
y: 874163
}, {
name: "Vehicles",
y: 228032
}, {
name: "Furniture",
y: 946767
}, {
name: "Instruments",
y: 108011
}, {
name: "Miscellaneous",
y: 390032
}, {
name: "Clothing",
y: 895380
}, {
name: "Electronics",
y: 562359
}, {
name: "Collectables",
y: 692397
}];
// build massive data set
for (var i = 0; i < 3; i++) {
dataset = dataset.concat(dataset);
}
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: 'Total distribution of wealth (stress test)'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
animation: { duration: 1500, easing: "easeOutBounce" },
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: false
}
...