JSFiddle - React, Tailwind, and code Playground

by Dinesh Singh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas class="bar-graph" id="bar1" height="150" width="150"></canvas>

JavaScript

$(document).ready(function(){

bardata = {
    labels: [""],
    datasets: [
        {
            label: "Target1",
            fillColor: "#565d70",
            strokeColor: "#565d70",
            highlightFill: "#565d70",
            highlightStroke: "#565d70",
            data: [50]
        },
        {
            label: "Target2",
            fillColor: "#8c5340",
            strokeColor: "#8c5340",
            highlightFill: "#8c5340",
            highlightStroke: "#8c5340",
            data: [75]
        }
    ]
};

var  baroptions = {
    barValueSpacing : 10,
    barDatasetSpacing : 10,
    responsive : true
  }
  
var ctx = document.getElementById("bar1").getContext("2d");
var chart = new Chart(ctx).Bar(bardata,baroptions);

});