JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>Bar Chart</title>

    <script src="Chart.min.js"></script>
    <meta name="viewport" content="initial-scale = 1, user-scalable = no" />
    <style>
			canvas{
			}
		</style>
  </head>

  <body>
    <canvas id="canvas" height="450" width="600"></canvas>
    <script>

		var model = {
	type: "bar",
	data: {
		labels: ["APP1", "APP2", "APP3", "APP4", "APP5"],
		datasets: [{
			data: [25, 61, 47, 45, 30],
			label: "Response > 5",
			borderColor: "#5151A1",
			backgroundColor: "#5151A1"
		}, {
			data: [22, 38, 53, 17, 55],
			label: "Response <= 5",
			borderColor: "#408040",
			backgroundColor: "#408040"
		}]
	},
	options: {
		responsive: true,
		legend: {
			position: "right"
		},
		scales: {
			
			yAxes: [{
				ticks: {
							min: 0,
							//max: 100,
							callback: function (value) {
								return value + "%"
							}
						},
						scaleLabel: {
							display: true
							//labelString: "Percentage"
						}
					}]
		}
	}
}


	new Chart(document.getElementById("canvas").getContext("2d"), model);
	
	</script>
  </body>

</html>