how do I get my lables to show up in ChartJS? - charts

Question

I'm trying to bring my label content to the top and change the label flow color by column, but i still can't find a way, can you suggest or suggest me some ways.
this is my:
desired output
this is my code: I'm trying to custom lange but it's not working as i thought.
var ctx = document.getElementById("myChart").getContext('2d');
Chart.defaults.font.size = 16;
const labels = ["Cat", "Dog", "Monkey"];
const data = [89, 52, 70];
const barBgColor = ['#A0C8BB', '#B0C3E6', '#FFE38B', ]
var chartOptions = {
borderSkipped: false,
plugins: {
legend: {
display: false,
},
datalabels: {
display: true,
color: 'black',
anchor: 'end',
align: 'top',
offset: -30,
formatter: function(value, context) {
return value + '%';
}
}
},
barThickness: 55,
responsive: true,
scales: {
x: {
display: true,
title: {
font: {
size: 16,
},
display: true,
text: "",
},
grid: {
display: false,
drawBorder: false,
},
ticks: {
display: true,
beginAtZero: true,
},
},
y: {
display: true,
ticks: {
display: false,
beginAtZero: true,
stepSize: 30,
},
grid: {
color: '#9B9898',
drawBorder: false,
borderDash: [8, 4],
},
},
},
};
var myChart = new Chart(ctx, {
type: 'bar',
plugins: [ChartDataLabels],
data: {
labels,
datasets: [{
data: data,
backgroundColor: barBgColor,
}],
},
options: chartOptions,
});
<canvas id="myChart"></canvas>