JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<div id="container" style="margin: 0 auto"></div>
JavaScript
$(function () {//Ring view of Pie chart
// Radialize the colors
$('#container').highcharts({
chart:{
type:'pie',
options3d: {
enabled: true,
alpha: 45,
renderTo: "container"
},
height:350,
width:500,
backgroundColor: '#FCFFC5',
borderWidth: 4,
borderRadius:2,
plotBorderWidth: 1,
plotBorderColor: '#346691',
plotShadow: true,
plotBackgroundColor: '#47d1ae',
plotBorderRadius:4
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
legend:{
enabled:true,
layout:'horizontal',
verticalAlign:'bottom',
borderWidth:0,
backgroundColor: '#bad8eb',
borderWidth: 4,
borderRadius:2
},
tooltip: {
enabled:true,
pointFormat: '{series.name}: <i>{point.y}</i>',
borderWidth:1,
borderRadius:2,
backgroundColor:'#b6fcd5'
},
plotOptions: {
pie: {
animation:false,
showInLegend: true,
depth: 22,
// center: ['50%', '75%'],
dataLabels: {
enabled: true,
rotation:0,
connectorWidth:1,
format:'{point.name}: {point.y}',
softConnector:false,
connectorColor:'blue',
borderRadius: 5,
backgroundColor: '#ffffff',
borderWidth: 1,
borderColor: '#AAA'
}
},
series:{
fillOpacity: 0.1,
animation:false,
...