JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>

JavaScript

var ctx = document.getElementById('canvas').getContext('2d');

    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ["Poor", "Fair", "Good", "Very Good", "Excellent", "N/A", "Total", "Average"],
	datasets: [{
		data: [1, 1, 1, 5, 4, 0, 12, 9.2],
		backgroundColor: [
							'rgba(255, 0, 0, 0.3)',
							'rgba(255, 255, 0, 0.3)',
							'rgba(0, 0, 255, 0.3)',
							'rgba(0, 255, 255, 0.3)',
							'rgba(135,206,235, 0.3)',
							'rgba(128,128,128, 0.3)',
							'rgba(255,215,0, 0.3)',
							'rgba (0, 104, 139, 0.3)'
						],
		borderColor: [
							'rgba(255, 0, 0, 0.6)',
							'rgba(255, 255, 0, 0.6)',
							'rgba(0,0, 255, 0.6)',
							'rgba(0, 255, 255, 0.6)',
							'rgba(135,206,235, 0.6)',
							'rgba(128,128,128, 0.6)',
							'rgba(255,215,0, 0.6)',
							'rgba (0, 104, 139, 0.6)'
					],
		borderWidth: 1
	}]}});