How put label into bar with vue-charjs - vuejs2

Question

Hi I need help with put value into bar with simbole % how de image
I try with install chartjs-plugin-datalabels but dont work.
The value I need is the value I get with which the bar is measured
The version is :
"chart.js": "^2.7.3",
"vue-chartjs": "^3.4.0",
I can't change the version becouse I have others graphics in these versions
My code
const horizonalLinePlugin = {
id: 'horizontalLine',
afterDraw: function (chartInstance) {
var yValue;
var yScale = chartInstance.scales["y-axis-0"];
var canvas = chartInstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
var fontSize = (200 / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
var data = ['20%', '30%', '40%', '60%', '10%', '30%', '20%'];
// var dataPresupuesto = ['10', '20', '30', '40', '10', '30', '20'];
var positionX = 130;
if (chartInstance.options.horizontalLine) {
for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
line = chartInstance.options.horizontalLine[index];
if (!line.style) {
style = "#080808";
} else {
style = line.style;
}
if (line.y) {
yValue = yScale.getPixelForValue(line.y);
} else {
yValue = 0;
}
ctx.lineWidth = 3;
if (yValue) {
window.chart = chartInstance;
ctx.beginPath();
ctx.moveTo(0, yValue);
ctx.lineTo(canvas.width, yValue);
ctx.strokeStyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillStyle = style;
ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
}
}
return;
}
}
}
import { Bar } from 'vue-chartjs'
// import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";
export default {
beforeMount() {
this.addPlugin(horizonalLinePlugin)
},
extends: Bar,
mounted() {
// Overwriting base render method with actual data.
this.renderChart({
labels: ['S01', 'S02', 'S03', 'S04', 'S05', 'S06', 'S07'],
datasets: [
{
label: 'Producción',
backgroundColor: '#000349',
data: [40, 39, 10, 40, 39, 80, 40]
},
{
label: 'Presupuesto',
backgroundColor: '#3AA9E0',
data: [40, 39, 10, 40, 39, 80, 40]
}
]
},
{
scales: {
xAxes: [{
stacked: true,
categoryPercentage: 0.5,
barPercentage: 1,
scaleLabel: {
display: true,
labelString: 'Semanas Comerciales'
}
}],
yAxes: [{
stacked: true,
}]
},
responsive: false,
plugins: {
datalabels: {
display: true,
color: "white",
textAlign: "center",
font: {
weight: "bold",
size: 16
}
}
}
})
}
}
Please someone that cant help me