estoy haciendo una grafica con la librería Chartjs el tipo de grafica es bar con la opción de stacked:true, para quede uno encima de otra, de manera que necesito ajustar los textos para quede como se muestra en la siguiente imagen:
quisiera que los texto de abajo se muevan a la parte izquierda y adicional pueda mostrar un texto dentro de cada barra.
dejo mi código:
var ctx2 = document.getElementById('leaderPerceptionGraphic').getContext('2d');
var myChart2 = new Chart(ctx2, {
type: 'bar',
data: {
labels: ["Total", "301 Redirect", "Broken Pages (4xx Errors)"],
datasets: [{
label: 'Dectratores',
backgroundColor: '#892000',
data: [
leaderPerceptionData.Detractores
]
},
{
label: 'Neutrales',
backgroundColor: '#E55D0C',
data: [
leaderPerceptionData.Neutrales
]
},
{
label: 'Promotores',
backgroundColor: '#09DE9D',
data: [
leaderPerceptionData.Promotores
]
}]
},
options: {
responsive: true,
layout: {
padding: {
left: 30
}
},
legend: {
display: false
},
plugins: {
datalabels: {
display: true,
align: 'center',
anchor: 'center'
}
},
scales: {
yAxes: [{
stacked: true,
ticks: {
mirror: true,
padding: 30,
display: false
},
gridLines: {
display: false,
drawBorder: false,
offsetGridLines: true
},
}],
xAxes: [{
stacked: true,
ticks: {
display: true,
offsetGridLines: true
},
gridLines: {
drawBorder: false,
display: false
}
}],
}
}
});
aunque indique en las opciones que el datalabels que el texto se mostrará en el centro, no logro que se vea de esa manera. Agradecería mucho la ayuda gracias