JSFiddle - React, Tailwind, and code Playground

by Gary Davies

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>chartsjs plugin data labels demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
    <script src="https://github.com/garipov/chartsjs-plugin-data-labels/releases/download/v0.1.3/chartsjs-plugin-data-labels.js"></script>
  </head>

  <body>
    <div class="graph">
      <div class="section">
        <canvas id="chart_id" class="graph" width="auto" height="auto"></canvas>
      </div>
    </div>
  </body>

</html>

JavaScript

var ctx = document.getElementById('chart_id');
var stackedBar = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    fullWidth: true,
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      stacked: 'stack 0',
      label: 'iPlayer',
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)'
      ],
      borderWidth: 1,
      data: [65],
      dataLabels: {
        colors: ['rgb(255, 99, 132)']
      }
    }, {
      stacked: 'stack 0',
      label: 'Home',
      backgroundColor: [
        'rgba(54, 162, 235, 0.2)'
      ],
      borderColor: ['rgba(54, 162, 235, 1)'],
      borderWidth: 1,
      data: [60],
      dataLabels: {
        colors: ['rgb(54, 162, 235)']
      }
    }]
  },
  options: {
    animation: {
      duration: 0
    },
    scales: {
      xAxes: [{
        display: false,
        stacked: true

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