JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 600px; width: 100%;"></div>

JavaScript

$(function () {
	$('#container').highcharts({
		chart: {
			type: 'pie',
			backgroundColor: 'transparent',
			spacing: [0, 0, 0, 0],
			margin: [0, 0, 0, 0],
			events: {
				load: function() {
					$.each(this.series[0].data, function(index, point) {

						var degree = (point.angle * 180) / Math.PI;
						var rotation = 0;
						(degree < 0) && (degree += 360);

						// If the slice is in the left half, then rotate 180
						// so the text won't look upside down
						if (degree >= 90 && degree <= 270) {
							rotation = degree - 180;
							point.dataLabel.x = 0;
							point.dataLabel.y = 0;
							point.dataLabel.translateX = (point.labelPos[2] + point.labelPos[4]) / 2;
							point.dataLabel.translateY = (point.labelPos[3] + point.labelPos[5]) / 2;
						} else {
							point.dataLabel.x = 0;
							point.dataLabel.y = 0;
							rotation = degree - 180;
							point.dataLabel.translateX = (point.labelPos[2] + point.labelPos[4]) / 2;
							point.dataLabel.translateY = (point.labelPos[3] + point.labelPos[5]) / 2;
						}

						point.dataLabel.rotation = Math.floor(rotation);
						point.dataLabel.show();
						point.dataLabel.updateTransform();
					});
				}
			}
		},
		title: {
			text: null
		},
		yAxis: {
			title: {
				text: 'Total percent market share'
			}
		},
		plotOptions: {
			pie: {
				borderColor: 'rgb(243, 243, 243)',
				borderWidth: 2,
				shadow: false,
				center: ['50%', '50%']
			}
		},
		tooltip: {
			enabled: false
		},
		series: [{
			type: 'pie',
			name: 'Votes',
			data: [
				['Yes', 9],
				['No', 5],
				['Undecided', 2]
			],
			size: '90%',
			dataLabels: {
				formatter: function () {
					return this.point.name;
				},
				color: 'white',
				connectorWidth: 0,
				distance: -80
			}
		}]
	});
});