JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
CSS
h2 {
margin-top: -25px;
margin-bottom: 0px;
line-height: 1em;
padding-bottom: 0px;
}
JavaScript
function sum(n) {
var v = function (x) {
return sum(parseFloat(n) + parseFloat(x));
};
v.valueOf = v.toString = function () {
return n;
};
return v;
}
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'results_pie',
plotBackgroundColor: '#F1F1F1',
backgroundColor: '#F1F1F1',
plotBorderWidth: null,
plotShadow: false,
animation: {
duration: 1000
},
style: {
fontFamily: "'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif"
},
events: {
load: function () {
var $hc_start = -1;
//console.log($('.highcharts-legend-item:first'));
/*$(".highcharts-legend-item").each( function(){
var t = $(this).find("tspan").text().split( ':' );
switch ( t[0] ){
case 'Group 2 Title 1':
case 'Group 2 Title 2':
var t = $(this).attr( 'transform' ).split( ',' );
t[1] = parseInt( t[1].replace( ')', '' ) );
t[1] = sum(t[1])(15);
$(this).attr( 'transform', t[0] + ',' + t[1] + ')' );
$hc_start = 1;
break;
default:
}
});*/
}
}
},
colors: [
'#1a7fc3',
'#b1c735',
'#9972b2',
'#bcd4ee',
'#e44425',
'#ebd4a4',
'#f8971d'],
tooltip: {
formatter: function () {
return this.point.name;
},
percentageDecimals: 2
},
credits: {
enabled: false
},
title: {
text: 'Total',
y: 50,
style: {
fontSize: '56px',
color: '#000000',
fontWeight: 'bold',
...