JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="chart_container"></div>

CSS

#chart_container {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}

JavaScript

var mychart;

mychart = new Highcharts.Chart({
	chart:
		{
			renderTo: 'chart_container',
			plotShadow: true
		},
	exporting: { 
		enabled: false 
	},
	credits: {
		enabled: false
	},
	plotOptions:
		{
			pie:
				{
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels:
						{
							enabled: true,
							style: {color: '#666666', font: '10px Trebuchet MS, Verdana, sans-serif'}
						},
					showInLegend: false
				}
		},
	title:
		{
			text: 'Chart Title',
			style: {
				color: 'Grey',
				fontSize:'12px',
				fontWeight: "bold"
			}
		},
	tooltip:
		{
			pointFormat: '<span style="color:{point.color};font-size:10px;font-family:Trebuchet MS, Verdana, sans-serif">{series.name}</span>: <b style="font-size:10px;font-family:Trebuchet MS, Verdana, sans-serif">{point.y} ({point.percentage:.0f}%)</b> <br/>',
			shared: false
		},
	series:
		[{
			data: [{color:  '#ABFFA9', name: 'Series A', sliced: false, y: 63, selected: false}, {color:  '#BBBBBB', name: 'Series B', sliced: false, y: 31, selected: false}],
			name: 'Status',
			type: 'pie'
		}]
});