JSFiddle - React, Tailwind, and code Playground

by Noel Calonia

HTML

<script src="Chart.js"></script>
<canvas id="totalPopulationByPurok" height="350" width="500"></canvas>
<div id="totalPopulationByPurokLegend"></div>

JavaScript

/*
 *	Chart.Bar.js (modified)
 *	modified to create different bar colors
 */

(function () {
    var c = this,
        b = c.Chart,
        d = b.helpers;
    var a = {
        scaleBeginAtZero: true,
        scaleShowGridLines: false,
        scaleGridLineColor: "rgba(0,0,0,.05)",
        scaleGridLineWidth: 1,
        barShowStroke: true,
        barStrokeWidth: 2,
        barValueSpacing: 5,
        barDatasetSpacing: 1,
        legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
    };
    b.Type.extend({
        name: "Bar",
        defaults: a,
        initialize: function (f) {
            var e = this.options;
            this.ScaleClass = b.Scale.extend({
                offsetGridLines: true,
                calculateBarX: function (g, l, i) {
                    var h = this.calculateBaseWidth(),
                        k = this.calculateX(i) - (h / 2),
                        j = this.calculateBarWidth(g);
                    return k + (j * l) + (l * e.barDatasetSpacing) + j / 2
                },
                calculateBaseWidth: function () {
                    return (this.calculateX(1) - this.calculateX(0)) - (2 * e.barValueSpacing)
                },
                calculateBarWidth: function (h) {
                    var g = this.calculateBaseWidth() - ((h - 1) * e.barDatasetSpacing);
                    return (g / h)
                }
            });
            this.datasets = [];
            if (this.options.showTooltips) {
                d.bindEvents(this, this.options.tooltipEvents, function (g) {
                    var h = (g.type !== "mouseout") ? this.getBarsAtEvent(g) : [];
                    this.eachBars(function (i) {
                        i.restore(["fillColor", "strokeColor"])
                    });
                    d.each(h,...