Currently, I have integrated a package that allows me to incorporate labels into my charts -
import * as pluginDataLabels from "chartjs-plugin-labels";
While it works perfectly fine with line charts, pie charts, and normal bar charts, I am facing an issue with displaying labels on my stacked bar chart. Below is the code snippet:
public stackedChartLabels = ["Test 1"];
public stackedChartPlugins = [pluginDataLabels];
public stackedChartData = [
{
label: "Low",
data: [67.8],
backgroundColor: "#D6E9C6", // green
stack: "a",
},
{
label: "Moderate",
data: [20.7],
backgroundColor: "#FAEBCC", // yellow
stack: "a",
},
{
label: "High",
data: [11.4],
backgroundColor: "#EBCCD1", // red
stack: "a",
},
];
public stackedChartOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
labels: [
{
render: function (args) {
return args.value;
},
position: "inside",
fontColor: "#023d7d",
fontSize: 12,
},
],
},
scales: {
yAxes: [
{
ticks: {
fontSize: 12,
fontColor: "#023d7d",
},
},
],
xAxes: [
{
ticks: {
min: 0,
max: 100,
fontSize: 12,
fontColor: "#023d7d",
precision: 0,
},
},
],
},
};
And here is the corresponding HTML code:
<canvas
baseChart
[datasets]="stackedChartData"
[labels]="stackedChartLabels"
[chartType]="'horizontalBar'"
[legend]="false"
[plugins]="stackedChartPlugins"
[options]="stackedChartOptions"
height="150"
>
</canvas>
I'm seeking assistance in resolving the issue of not being able to display labels on my stacked bar chart. The objective is to showcase the value on each segment accurately.