JSFiddle - React, Tailwind, and code Playground

by cubicalmonkey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<!--<div style="height: 50vh">-->
<canvas id="myChart" width="300" height="100"></canvas>

<div style="height: 100px;"></div>

<canvas id="myChart2" width="300" height="100"></canvas>

JavaScript

// Define a plugin to provide data labels
Chart.plugins.register({
   afterDatasetsDraw: function(chart, easing) {
      // To only draw at the end of animation, check for easing === 1
      var ctx = chart.ctx;
      chart.data.datasets.forEach(function(dataset, i) {
         var meta = chart.getDatasetMeta(i);
         if (!meta.hidden) {
            meta.data.forEach(function(element, index) {
               // Draw the text in black, with the specified font
               ctx.fillStyle = 'rgb(0, 0, 0)';
               var fontSize = 16;
               var fontStyle = 'normal';
               var fontFamily = 'Helvetica Neue';
               ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
               // Just naively convert to string for now
               var dataString = dataset.data[index].toString();
               // Make sure alignment settings are correct
               ctx.textAlign = 'center';
               ctx.textBaseline = 'middle';
               var paddingX = -10;
               var paddingY = -5;
               var position = element.tooltipPosition();
               ctx.fillText(dataString, position.x - paddingX, position.y - (fontSize / 2) - paddingY);
            });
         }
      });
   }
});

var ctx = document.getElementById("myChart2").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['A', 'B'],
      datasets: [{
         data: [-10, -20]
      }]
   },
   options: {
      responsive: false,
      showDatapoints: true,
      scales: {
         maintainAspectRatio: true,
         responsive: false,
         xAxes: [{
            ticks: {
               beginAtZero: true
            },
            gridLines: {
               display: false
            }
         }],
         yAxes: [{
            position: 'left', //<-- set this
            gridLines: {
               display: false
            }
         }]
      },
      legend: {
         display: false
      }
   }
});