JSFiddle - React, Tailwind, and code Playground
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="50" width="50"></canvas>
JavaScript
$(document).ready(function(){
newbardata = {};
newbardata.labels = ["A,B,C"];
newbardata.datasets = new Array();
newbardata.datasets[0] = new Object();
newbardata.datasets[0].label = 'Q';
newbardata.datasets[0].fillColor = '#FFFF00';
newbardata.datasets[0].data = [70];
newbardata.datasets[1] = {};
newbardata.datasets[1].label = 'W';
newbardata.datasets[1].fillColor = '#565d70';
newbardata.datasets[1].data = [50];
newbardata.datasets[2] = {};
newbardata.datasets[2].label = 'E';
newbardata.datasets[2].fillColor = '#FE2EF7';
newbardata.datasets[2].data = [35];
});
var baroptions = {
barValueSpacing : 5,
barDatasetSpacing : 5,
responsive : true
}
var ctx = document.getElementById("bar1").getContext("2d");
var chart = new Chart(ctx).Bar(newbardata,baroptions);