JSFiddle - React, Tailwind, and code Playground

by Amir Danish

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="broadcast" width="350" height="250" style="width: 350px; height: 250px;"></canvas>

JavaScript

var seriesData = [1,210,215];
var labelsData = ["one", "two", "second"];
var backgroundColors = ["#FBC02D","#E64A19","#388E3C"]
var t = new Chart(document.getElementById('broadcast').getContext('2d'), {
	type: "doughnut",
	data: {
		datasets: [{
			data: seriesData,
			backgroundColor: backgroundColors,
			hoverBorderColor: "#fff"
		}],
		labels: labelsData,
	},
	options: {
		cutoutPercentage: 65,
		maintainAspectRatio: false,
		legend: {
			display: false
		},
		plugins: {
			datalabels: {
				display: false
			}
		},
		tooltips: {
			enabled: true,
			mode: 'nearest'
		},
		 scales: {
			yAxes: [{
				ticks: {
					max: 5,
					min: 0,
					stepSize: 0.5
				}
			}]
		}
		
	}
});