JSFiddle - React, Tailwind, and code Playground

by Udhay Titus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/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="myChart" height="450" width="600"></canvas>
    <script>

	
	
	</script>
  </body>

</html>

JavaScript

var ctx = $('#myChart');

ctx.height(100);

var myChart = new Chart(ctx, {
    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"
        }]
    },
    maintainAspectRatio: false,
    options: {
        responsive: true,
        legend: {
            position: "right",
            align: "middle"
        },
         scales: {

            yAxes: [{
                ticks: {
                    min: 0,
                    //max: 100,
                    callback: function(value) {
                        return value + "%"
                    }
                },
                scaleLabel: {
                    display: true
                    //labelString: "Percentage"
                }
            }]
        }
        }
});