I'm trying to put images on the vertical axis of my chart using Chart.js but I can't figure out how...
For now the data in my chart is hard coded and it is supposed to show the emotions of a person during the week.
Here is what I have tried:
import Chart from 'chart.js/auto'
(async function () {
const EMOTIONS = ["Angry.png", "Sad.png", "Normal.png", "Happy.png"];
const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
const data = [
{day: DAYS[0], i: 2},
{day: DAYS[1], i: 3},
{day: DAYS[2], i: 1},
{day: DAYS[3], i: 2},
{day: DAYS[4], i: 3},
{day: DAYS[5], i: 2},
{day: DAYS[6], i: 0},
];
var ctx = document.getElementById('feel-graph').getContext('2d');
new Chart(
ctx,
{
type: 'line',
data: {
labels: data.map(row => row.day),
datasets: [
{
label: 'Your emotions throughout the week',
data: data.map(row => row.i)
}
]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Personal Statistics'
}
},
scales: {
y: {
ticks: {
callback: function (val) {
var image = new Image()
image.src= EMOTIONS[val]
return image
//I also tried to return the image element as a string but it doesn't work...
//return `<image data-src="${EMOTIONS[val]}">`
}
}
}
}
}
}
);
})();
Is it even possible to do it? I have searched a lot on the internet and I have found nothing that comes close to what I search...