JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.js "></script>
<canvas id="myChart1" height="300" width="500"></canvas>

JavaScript

var chartData = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    label: "Buttons",
    strokeColor: "#79D1CF",
    tension: 0,
    fill: false,
    data: [60, 80, 81, 56, 55, 40]
  }, {
    label: "Zipppers",
    strokeColor: "rgba(255,255,0,1)",
    tension: 0,
    fill: false,
    data: [50, 75, 42, 33, 80, 21]
  }]
};

var options = {
  animation: {
    onComplete: function() {
      var ctx = this.chart.ctx;
      ctx.font = this.scale.font;
      //alert(ctx.font);
      ctx.fillStyle = this.scale.textColor
      ctx.textAlign = "center";
      ctx.textBaseline = "bottom";
      var datasetName = chartData.data.datasets[0].label;
      alert(chartData.data.datasets[0].label)
      myLine.data.datasets.forEach(function(dataset) {
        ctx.fillStyle = dataset.strokeColor;
        dataset.points.forEach(function(points) {
          ctx.fillText(points.value, points.x, points.y - 10);
        });
      })
    }
  }
};


Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = true;
Chart.defaults.global.title.display = true;
Chart.defaults.global.title.text = "My Chart";
Chart.defaults.global.title.fontSize = 30;
Chart.defaults.global.legend.position = "bottom";
Chart.defaults.global.hover.mode = "label";
Chart.defaults.global.tooltips.enabled = true;


var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: options
});