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

Question

I have built a single horizontal stacked bar chart using LwC with ChartJS version v2.8.0, Now I want to display the dataset labels like 'Completed','Waiting','In Progress' on bars below corresponding to each bars. Here is the example of screenshot below which I am trying to achieve: Stacked bar chart example/expected outcome

Here is the below code:

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: "blue",
        data: [65],
      },
      {
        label: 'Waiting',
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        backgroundColor: "blue",
        data: [80],
      },
    ]
  },
  options: {
  indexAxis: 'x',
  scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      },
    resposive:true,
    plugins: {
      datalabels: {
        clamp: true,
        color: "black",
        labels: {
          title: {
            font: {
              weight: "bold"
            }
          }
        }
      }
    }
  }
});

And here is the screenshot below when I run the code: screenshot

Can someone suggest me how to display the dataset labels below the bars?

user2057925 · Answer

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;
}

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

1 Answers