JSFiddle - React, Tailwind, and code Playground

https://github.com/chartjs/Chart.js/issues/4536

by Gary Davies

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<div class="chart-wrapper">
  <canvas id="chart" width="400" height="200"></canvas>
</div>

CSS

.chart-wrapper {
  position: relative;
}

JavaScript

function commaify(value) {
  var result = ('' + value).replace(/^(-?\d+)(\d{3})/, '$1,$2');
  return value == result ? result : commaify(result);
}

var data = {
  labels: ["January", "February"],
  datasets: [{
    label: "iPlayer",
    backgroundColor: "rgba(255,99,132)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    stack: 'Stack 0',
    data: [11181720]
  }, {
    label: "RB+",
    backgroundColor: "rgba(255,255,132,0.8)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    stack: 'Stack 0',
    data: [15265320]
  },
  {
    label: "home",
    backgroundColor: "rgba(255,255,132,0.8)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    stack: 'Stack 0',
    data: [15265320]
  }]
};

var options = {
    responsive: true,
    plugins: {
    	legend: false,
      title: false,
      datalabels: {
        anchor: 'center',
        align: 'center',
        borderColor: 'green',
        borderRadius: 25,
        borderWidth: 2,
        color: 'black',
				display: function(context) {
          var dataset = context.dataset;
          var count = dataset.data.length;
          var value = dataset.data[context.dataIndex];
          return value > count * 1.5;
        },
        font: {
          weight: 'bold'
        },
        formatter: function(value) {
          return data.labels[0] + ' ' + commaify(value);
        }
      }
    },
      scales: {
        xAxes: [{
          display: false,
          offset: true,
          stacked: true

        }],
        yAxes: [{
          display: false,
          offset: true,
          stacked: true
        }]
      }
};

    var chart = new Chart('chart', {
      type: 'horizontalBar',
      data: data,
      options: options
    });