JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"></script>
<canvas id="myChart" width="100" height="100"></canvas>

JavaScript

var ctx = document.getElementById("myChart");
debugger;
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
        datasets: [{
            data: [6, 87, 56, 15, 88, 60, 12],
            backgroundColor: "#4082c4"
        }]
    },
    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,
            		gridLines: {
                	display : false
                },
                ticks: {
                		display: false,
                    beginAtZero:true
                }
            }],
            xAxes: [{
            		gridLines: {
                	display : false
                },
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});