使用Chart.js库在每个条的顶部设置Y轴

我有一个水平条形图，我想要的结果是像这张照片使用Chartjs库

这是以下代码:

TS:

createAreaChart() {
this.barChart1 = document.getElementById('barChart1');
this.ctx1 = this.barChart1.getContext('2d');
let i = 0;
this.data1.forEach(div => {
if(i==0){
this.backgroundColors.push('#A60A2D');
} if(i==1) {
this.backgroundColors.push('#00A2C3');
} if(i==2) {
this.backgroundColors.push('#434F55');
i = -1;
}
i++;
});
this.chart1 = new Chart(this.ctx1, {
type: 'horizontalBar',
data: {
labels: this.data1.map(r => r.icon),
datasets: [{
data: this.data1.map(r => r.total),
label: 'Annual Cost',
backgroundColor: this.backgroundColors,
borderColor: this.backgroundColors,
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
if (parseInt(value) >= 1000) {
return '$' + value.toFixed(2).toString().replace(/B(?=(d{3})+(?!d))/g, ",");
} else {
return '$' + value.toFixed(2).toString();
}
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
precision: 2,
userCallback : function(value, index, values) {
if(parseInt(value) >= 1000){
return '$' + value.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
}
});
this.chart1.height = 225;
}

<div class="card chart-card">
<div class="card-header">
<div class="card-title">Test</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="barChart1" height="220px"></canvas>
</div>
</div>
</div>

结果

我需要将y轴文本置于每个条之上，我该如何实现这一点?

与其他答案一样，我尝试使用:

layout: {
padding: {
left: 0,
right: 0,
top: 15,
bottom: 0
}
}

plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}