How to add labels inside a horizontal stacked bar chart with Chart.js

Question

I'm trying to add labels inside each stacked data in a horizontal bar chart.

It seems the mirror option doesn't work for horizontal bar charts, and the similar questions on SO do not work (Chart.js - Writing Labels Inside of Horizontal Bars?).

You can run the sample snippet below:

const ctx = document.querySelector("canvas").getContext('2d');
var chart = getChart();
new Chart(ctx, chart);

function getChart() {
  return {
    "type": "horizontalBar",
    "data": {
      "datasets": [{
          "label": "label 1",
          "data": [
            24
          ],
          "fill": false,
          "backgroundColor": "rgba(255, 82, 82, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        },
        {
          "label": "label 2",
          "data": [
            12
          ],
          "fill": false,
          "backgroundColor": "rgba(224, 64, 251, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        },
        {
          "label": "label 3",
          "data": [
            12
          ],
          "fill": false,
          "backgroundColor": "rgba(41, 121, 255, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        },
        {
          "label": "label 4",
          "data": [
            35
          ],
          "fill": false,
          "backgroundColor": "rgba(0, 230, 118, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        },
        {
          "label": "label 5",
          "data": [
            5
          ],
          "fill": false,
          "backgroundColor": "rgba(255, 196, 0, 0.2)",
          "borderColor": "rgb(255,255,255)",
          "hoverBorderColor": "rgb(255,255,255)",
          "borderWidth": 1
        }
      ]
    },
    "options": {
      "maintainAspectRatio": false,
      "responsive": true,
      "legend": {
        "display": false
      },
      "tooltips": {
        "enabled": true,
        "mode": "single"
      },
      "scales": {
        "xAxes": [{
          "display": false,
          "stacked": true
        }],
        "yAxes": [{
          "display": false,
          "stacked": true
        }]
      }
    }
  };
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
</head>

<body>
  <canvas id="chart"></canvas>
</body>

</html>

How to add labels inside a horizontal stacked bar chart with Chart.js

0 Answers0