JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
 <div class="form-group">
                            <div class="col-label term">Totaal aantal uren</div>
                            <div class="col-control">
                                <strong>150</strong> uur
                                <canvas id="myChart" height="410" width="500"></canvas>
                            </div>
                            <div class="col-lg-12">
                            </div>
                        </div>

JavaScript

var ctx = document.getElementById("myChart");
        debugger;
        var data = {
            labels: ["Totaal aantal uur", "Vakinhoudelijk", "(Vak)didactisch", "Pedagogisch", ["Professionele", "bekwaamheid"]],
            datasets: [{
                data: [150, 70.15, 30.30, 40.45, 10.30],
                backgroundColor: ["#b5b5b5", "#9fc017", "#d2335b", "#fe9947", "#0182d5"]
            }]
        }
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                "hover": {
                    "animationDuration": 0
                },
                "animation": {
                    "duration": 1,
                    "onComplete": function () {
                        var chartInstance = this.chart,
                          ctx = chartInstance.ctx;

                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                                var data = dataset.data[index];
                                ctx.fillText(data, bar._model.x, bar._model.y - 5);
                            });
                        });
                    }
                },
                legend: {
                    "display": false
                },
                tooltips: {
                    "enabled": false
                },
                scales: {
                    yAxes: [{
                        "display": false,
                        ticks: {
                        //THIS MAKES IT NOT WORK IN IE START 
                        //    max:...