JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

const N = 10;

new Chart(document.querySelector('#chart'), {
  type: 'line',
  data: {
    labels: [...Array(N)].map((n, i) => i + 1),
    datasets: [ {
      label: 'hello, world!!',
      data: [...Array(N)].map((n, i) => (Math.random() * 200 | 0) - 100),
    } ],
  },
  options: {
    tooltips: {
      enabled: false,
    },
    hover: {
      animationDuration: 0,
    },
    animation: {
      onComplete() {
        const { ctx, data, chart } = this;

        ctx.fillStyle = 'red';
        ctx.textAlign = 'center';

        data.datasets.forEach((d, index) => {
          chart.controller.getDatasetMeta(index).data.forEach((n, i) => {
            ctx.fillText(d.data[i], n._model.x, n._model.y - 10);
          });
        });
      },
    },
  },
});