JSFiddle - React, Tailwind, and code Playground

by MarkMor

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

    <div id="container_pie_highchart"></div>

CSS

@import "https://code.highcharts.com/css/highcharts.css";

/*
HIGHCHART CONTAINER STYLES
*/
.highcharts-tooltip-box {
  fill: #34383c;
  fill-opacity: 1;
  stroke-width: 0;
}

.highcharts-tooltip text {
  fill: #f0f2f5;
}

.highcharts-container {
  width: 100%;
  font-family: "proxima-nova", -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.highcharts-color-0 {
  fill: #0097a8;
}

.highcharts-color-1 {
  fill: #6625C4;
}

.highcharts-color-2 {
  fill: #FF1A6C;
}

.highcharts-color-3 {
  fill: #FC9446;
}

.highcharts-color-4 {
  fill: #809afd;
}

.highcharts-color-5 {
  fill: #ffa3b5;
}

.highcharts-color-6 {
  fill: #f1c21b;
}

.highcharts-color-7 {
  fill: #444950;
}

.highcharts-data-labels .highcharts-data-label-connector {
  fill: none;
}
.highcharts-data-labels .highcharts-color-0 {
  stroke: #0097a8;
}
.highcharts-data-labels .highcharts-color-1 {
  stroke: #6625C4;
}
.highcharts-data-labels .highcharts-color-2 {
  stroke: #FF1A6C;
}
.highcharts-data-labels .highcharts-color-3 {
  stroke: #FC9446;
}
.highcharts-data-labels .highcharts-color-4 {
  stroke: #809afd;
}
.highcharts-data-labels .highcharts-color-5 {
  stroke: #ffa3b5;
}
.highcharts-data-labels .highcharts-color-6 {
  stroke: #f1c21b;
}
.highcharts-data-labels .highcharts-color-7 {
  stroke: #444950;
}

/*
HIGHCHART CONTAINER STYLES
*/
.highcharts-tooltip-box {
  fill: #34383c;
  fill-opacity: 1;
  stroke-width: 0;
}

.highcharts-tooltip text {
  fill: #f0f2f5;
}

.highcharts-container {
  width: 100%;
  font-family: "proxima-nova", -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.highcharts-color-0 {
  fill: #0097a8;
}

.highcharts-color-1 {
  fill: #6625C4;
}

.highcharts-color-2 {
  fill: #FF1A6C;
}

.highcharts-color-3 {
  fill: #FC9446;
}

.highcharts-color-4 {
  fill: #809afd;
}

.highcharts-color-5 {
  fill:...

JavaScript

Highcharts.chart('container_pie_highchart', {
			chart: {
				type: 'pie',
				styledMode: true,
				height: 400
			},
			title: {
				text: ''
			},
			xAxis: {
				categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
			},
			tooltip: {
				distance: 8,
				backgroundColor: "#FFFFFF",
				borderColor: "#f0f2f5",
				borderRadius: 16,
				style: {
					color: '#666f7a'
				}
			},
			credits: {
				enabled: false
			},
			yAxis: {
				title: {
					text: ''
				}
			},
			legend: {
				align: 'left'
			},
			series: [{
			//innerSize: '20%', UNCOMMENT OUT THIS CODE TO CREATE A DONUT CHART
			name: "Designer Names",
				colorByPoint: true,
				data: [{
					name: 'Jenny',
					y: 45
				}, {
					name: 'Jarrod',
					y: 25
				}, {
					name: 'Ryan',
					y: 20
				}, {
					name: 'Mark',
					y: 10
				}]
			}]
		});