JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

$(document).ready(function () {
    var a = [1, 2, 3];
    var data = {
        labels: ["A", "B", "C"],
        datasets: [{
            label: "My dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: a
        }]
    };

Chart.types.Bar.extend({
    name: "BarAlt",
    draw: function(){
        this.options.barValueSpacing = this.chart.width / 5;
        Chart.types.Bar.prototype.draw.apply(this, arguments);
    }
});
    
    var ctx = $("#myChart2").get(0).getContext("2d");
    var myLineChart = new Chart(ctx).Bar(data, {
        responsive: true
    });

    var ctx = $("#myChart1").get(0).getContext("2d");
    var myLineChart = new Chart(ctx).BarAlt(data, {
        responsive: true
    });
});