Chartjs-LWC Chart js: How to display dataset labels on each of the bars below in single horizontal stacked bar chart js

by

0👍

✅

You could leverage on align, offset and formatter options of datalabels plugin. Furthermore you could need to define 2 labels, one for numbers one for the dataset labels.

Chart.plugins.register(ChartDataLabels);
new Chart(
 document.getElementById('myChart'),
 {
  type: 'horizontalBar',
  data: {
    labels: ["#count"],
    datasets: [
      {
        label: 'Completed',
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        backgroundColor: "blue",
        data: [10],
      },
      {
        label: 'In Progress',
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        backgroundColor: "red",
        data: [65],
      },
      {
        label: 'Waiting',
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        backgroundColor: "green",
        data: [80],
      },
    ]
  },
  options: {
  indexAxis: 'x',
  scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      },
    resposive:true,
    plugins: {
      datalabels: {
        clamp: true,
        labels: {
          title: {
             clamp: true,
             color: "black",
             offset(ctx) {
               const lineHeight = 20;
               const chart = ctx.chart;
               const meta = chart.getDatasetMeta(ctx.datasetIndex); 
               const element = meta.data[ctx.dataIndex];
               const model = element._model;
               return model.height / -2 - lineHeight;
            },
            align: 'top',
            formatter: (value, ctx) => ctx.chart.data.datasets[ctx.datasetIndex].label,
            font: {
              weight: "bold"
            }
          },
          value: {
            color: "white",
          }
        }
      }
    }
  }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment