0

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...

Mr.D
  • 79
  • 6

0 Answers0