I came across a quick and efficient solution for adding labels to charts by using the following plugin: https://github.com/chartjs/chartjs-plugin-datalabels

To incorporate labels into your charts, simply import the plugin into your js file like so:

import 'chartjs-plugin-datalabels'

If you wish to display values on top of the charts (globally), just include these options in your code:

Chart.defaults.global.plugins.datalabels.anchor = 'end';
Chart.defaults.global.plugins.datalabels.align = 'end';

For more customization options, refer to this link:

Enhance your chart display with a more comprehensive solution that includes showing the datapoint value inside the bar when the axis height is similar to the bar height. This feature will ensure that the value is visible above or below the bar if it extends beyond the canvas viewable area.

Customize your chart by utilizing this plugin:
Chart.plugins.register({
  afterDraw: function(chartInstance) {
    if (chartInstance.config.options.showDatapoints) {
      var helpers = Chart.helpers;
      var ctx = chartInstance.chart.ctx;
      var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);

      // Display the chart value above the bar
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.default.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      ctx.fillStyle = fontColor;

      chartInstance.data.datasets.forEach(function(dataset) {
        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
          var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
          var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
          ctx.fillText(dataset.data[i], model.x, yPos);
        }
      });
    }
  }
});

To activate this feature in your chart, simply add the following property to your chart options:

showDatapoints: true,

This solution worked for me (see plugins section below).

options: {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    },
    plugins: {
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: Math.round,
        font: {
          weight: 'bold'
        }
      }
    }
  }

Happy Coding!

Consider giving these suggestions a shot:

animation: {
  duration: 1,
  onCompletion: function({ chart }) {
    const context = chart.context;

    chart.configuration.data.datasets.forEach(function(dataSet, index) {
      const metadata = chart.getDatasetMetadata(index);

      metadata.data.forEach(function(barElement, position) {
        const dataPoint = dataSet.data[position];

        context.fillText(dataPoint, barElement.x, barElement.y - 5);
      });
    });
  }
}

To insert additional space at the top of your chart, include a padding-top attribute in your chart settings

configuration: {
    padding: {
        left: 0,
        right: 0,
        top: 25,
        bottom: 0
    }
 },

One option to consider is using a plugin that displays the data value above each bar in a chart.

plugins: {
afterDatasetsDraw: function (context, easing) {
 var ctx = context.chart.ctx;
   context.data.datasets.forEach(function (dataset) {
     for (var i = 0; i < dataset.data.length; i++) {
        if (dataset.data[i] != 0) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            var textY = model.y + (dataset.type == "line" ? -3 : 15); 
              ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
              ctx.textAlign = 'start';
              ctx.textBaseline = 'middle';
              ctx.fillStyle = dataset.type == "line" ? "black" : "black";
              ctx.save();
              ctx.translate(model.x, textY-15);
              ctx.rotate(4.7);
              ctx.fillText(dataset.data[i], 0, 0);
              ctx.restore();
             }
           }
         });
       }
    }

Check out the live code example here: Link

This method worked for me, although the values are displayed in the middle of the bar.

chart.chart.config.options.animation["onComplete"] =  function () {
        var ctx = chart.chart.ctx;
        ctx.font = '22px "Helvetica Neue", Helvetica, Arial, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                    scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
                ctx.fillStyle = '#444';
                var y_pos = model.y + 50;
                if ((scale_max - model.y) / scale_max >= 0.5)
                    y_pos = model.y + 20;
                ctx.fillText(dataset.data[i], model.x, y_pos);    
            }
        });                
    }