JSFiddle - React, Tailwind, and code Playground
by Purva Kshatriya
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="margin: 0 auto"></div>
JavaScript
$(function () {//Pie chart
$('#container').highcharts({
chart:{
type:'pie',
height:350,
width:500,
backgroundColor: '#FCFFC5',
borderWidth: 4,
borderRadius:2,
plotBorderWidth: 1,
plotBorderColor: '#346691',
plotShadow: true,
plotBackgroundColor: '#00c060',
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,
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:{
point: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
}
}
}
},
series: [
{
...