I am trying to figure out how to label each stacked bar on hover with mouse, show a total across the whole stack and a total for that piece of the bar.
currently my code shows undefined for most of the bar names or shows random x axis labels, I've tired looking into other questions but it doesn't seem like anyone else has had this issue
here's my data
data = { x: "Sunday", y: 850, Labels: "Irelo" },
{ x: "Monday", y: 3000, Labels: "Irelo" },
{ x: "Sunday", y: 6748.4, Labels: "Quote-runner" },
{ x: "Monday", y: 2400, Labels: "Quote-runner" },
{ x: "Tuesday", y: 2900, Labels: "Quote-runner" },
{ x: "Wednesday", y: 7600, Labels: "Quote-runner" },
and
my chart code
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
datasets: [{
data: data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
plugins: {
title: {
display: true,
text: 'Binder'
},
},
responsive: true,
interaction: {
intersect: false,
},
scales: {
x: {
stacked: false,
type: 'category',
labels: ['January', 'February', 'March', 'April', 'May', 'June']
},
y: {
stacked: true
}
}
}
});