JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" width="100" height="50"></canvas>

TypeScript

let canvas = document.getElementById('chart') as HTMLCanvasElement;
let ctx = canvas.getContext('2d');

var barChartData = {
          labels: [
            "January",
            "February",
            "March"
          ],
          datasets: [
            {
              label: "Dataset 1",
              backgroundColor: "#FF0000",
              stack: "Stack 0",
              data: [1, 2, 3],
            },
            {
              label: "Dataset 2",
              backgroundColor: "#0000FF",
              stack: "Stack 0",
              data: [5, 4, 3],
            },
            {
              label: "Dataset 3",
              backgroundColor: "#00CC00",
              stack: "Stack 1",
              data: [6, 5, 4],
            },
            {
              label: "Dataset 4",
              backgroundColor: "#000000",
              stack: "Stack 2",
              data: [6, 5, 4],
            }
          ]
        };

        new Chart(ctx, {
          type: "horizontalBar",
          data: barChartData,
          options: {


            scales: {
                yAxes: [{
                    ticks: {
                        callback: function(value, index, values) {
                            
                            return value;
                        }
                    }
                }]
            },
            
            title: {
              display: true,
              text: "Chart.js Bar Chart - Stacked",
            },
            tooltips: {
              mode: "index",
              intersect: false,
            },
            responsive: true,
          },
        });