JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="rateofreturn-chart-canvas"></canvas>

JavaScript

var rateOfReturn = document.getElementById("rateofreturn-chart-canvas").getContext('2d');

Chart.pluginService.register({
    beforeUpdate: function(chart) {
        for (var i = 0; i < chart.config.data.datasets.length; i++) {
            var dataset = chart.config.data.datasets[i];
            for (var j = 0; j < dataset.data.length; j++) {
                var model = dataset._meta[0].data[j]._model;

                var start = model.x,
                    end = model.x + model.width,
                    gradient = rateOfReturn.createLinearGradient(start, 0, end - 5, 0);
                gradient.addColorStop(0, dataset.backgroundColor[j][0]);
                gradient.addColorStop(1, dataset.backgroundColor[j][1]);

                dataset.backgroundColor[j] = gradient;
            }
        }
    }
});

var rateOfReturnData = {
    labels: ["Monthly", "Quarterly", "Semiannually", "Annually"],
    datasets: [{
            label: "label1",
            backgroundColor: [
                ['#26343b', 'white'],
                ['#26343b', 'white'],
                ['#26343b', 'white'],
                ['#26343b', 'white']
            ],
            data: [4, 6, 8, -3],
        }, {
            label: "",
            backgroundColor: [
                ['#be1a33', 'white'],
                ['#be1a33', 'white'],
                ['#be1a33', 'white'],
                ['#be1a33', 'white']
            ],
            data: [6, 10, 11, 7],
        }, {
            label: "",
            backgroundColor: [
                ['#00b786', 'white'],
                ['#00b786', 'white'],
                ['#00b786', 'white'],
                ['#00b786', 'white']
            ],
            data: [13, 10, 9, 4],
        }, {
            label: "",
            backgroundColor: [
                ['#f86929', 'white'],
                ['#f86929', 'white'],
                ['#f86929', 'white'],
                ['#f86929', 'white']
            ],
            data: [6, 8, 2, 11],
        },...