JSFiddle - React, Tailwind, and code Playground

by ildarsawtech

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart_wrap">
	<div id="donutchart" style="width: 100%; height: 250px;"></div>
</div>

CSS

* {
	background-color: transparent;
}
.chart_wrap {
	max-width: 300px;
	position: relative;
	margin: auto;
}

JavaScript

google.charts.load("current", {packages:["corechart"]});

google.charts.setOnLoadCallback(function() {
	var money_akk_arr = [['Actives', ''], ['var 1', 4], ['var 2', 6]];
	drawChartRound( money_akk_arr, 'donutchart' );
});

function drawChartRound( arr_data, id ) {
	var data = google.visualization.arrayToDataTable(arr_data);

	var options = {
		title: '',
		pieHole: 0.6,
		slices: {
			0: { color: '#56b900' },
			1: { color: '#cccccc' }
		},
		legend         : 'none',
		backgroundColor: 'transparent',
		chartArea      : {left: 10, top: 10, width: '95%', height: '95%'}
	};

	var chart = new google.visualization.PieChart(document.getElementById(id));
	chart.draw(data, options);
}