chart.js 2.0 bar

by cubicalmonkey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<div style="width: 75%">
		<canvas id="myChart" width="400" height="400"></canvas>
	</div>

JavaScript

var randomScalingFactor = function() {
			return Math.round(Math.random() * 100);
		};
  var config = {
			type: 'doughnut',
			data: {
				datasets: [{
					data: [3, 25,72],
					backgroundColor: [
						chartColors.red,
						chartColors.yellow,
						chartColors.green,
					],
					label: 'Dataset 1'
				}],
				labels: [
					'Interference',
					'Utilization',
					'Unused/Free',
				]
			},
			options: {
				responsive: true,
				legend: {
					position: 'top',
				},
				title: {
					display: true,
					text: 'WiFi Channel Utilization'
				},
				animation: {
					animateScale: true,
					animateRotate: true
				}
			}
		};

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, config);