How to add different images (png, jpd or even webp) inside the point elements on scatter graphs?

[SilviuGheorghe]

I tried by creating an array with dynamically added images, then writing in datasets the following: pointStyle = myArray

I also tried this, saw it in a video tutorial:

const pointImage = new Image();
pointImage.src = 'https://www.chartjs.org/docs/3.5.1/favicon.ico';

then pointStyle = pointImage

It didn't work. What am I doing wrong?

Thank you!

[Udemology]

Have you watched this video: https://www.youtube.com/watch?v=lfHwnIk-JY8&t=209s&ab_channel=ChartJS

If you did recheck your code and rewatch the video. You are missing something. I follow the video to see if it works on Chart.js Version 4 and it does nicely.

[SilviuGheorghe]

Thank you for your replay, it works indeed :) But i'm struggling to do this with multiple and dynamically created images (from links). Creating multiple images "by hand" as shown in that video seems repetitive to me.

Here is a more concrete example/pseudocode.

the pointStyle option accepts an array with multiple images as Image() constructor, not with just links - this is the first lesson I've learned :)

let imgArray = [];
let dataMockup = ['favicon1', 'favicon2', 'favicon3'];

dataMockup.forEach (image => {
let img = new Image (100, 100);
img.src = https://www.chartjs.org/docs/3.5.1/${image}.ico
console.log(img) // "< i mg width="100" height="100" src="https://www.chartjs.org/docs/3.5.1/favicon1.ico">" etc.
imgArray.push(img);
})

The second lesson I learned is that you can't upload HTMLImageElement(s) into an array. Logging imgArray will show something like this [img, img, img] and, obviously(?), pointStyle = imgArray won't work.

This happens in backend. Doing exactly the same thing in frontend (React / react-chartjs-2) will work and this bothers me :)

[Udemology]

I made one in Chart.js 4 see if this is what you need: https://youtu.be/BZhSAnNglGo
Was able to connect it as an array.

[SilviuGheorghe]

Thank you! This is the kind of code I wrote it myself in the first place and dismissed it after I saw that works only in React. It seems that it doesn't work in backend and I'm not sure if it's a Chart.js issue (maybe I'm still doing something wrong).
Let me explain.

I have a mockupData object (later it will be an API). I filtered the data and created a chartObj with the datasets and options subkeys respectively. The chartObj is populated accordingly with all kind of info and options that I wanted (and I'm still learning the Chart.js docs to decide what it can do and how to do it).

With chartObj sent to frontend (React) all I had to do was to import only what I need, including chartjs-plugin-datalabels to display labels under points. I'm pretty sure I did everything correctly, nothing more, nothing less:

import { Scatter } from 'react-chartjs-2';
import { Chart, LinearScale, PointElement, Title, Legend } from "chart.js";
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(LinearScale, PointElement, Title, Legend, ChartDataLabels);

chartObj looks like this:

(chartObj = {
"datasets": [
{
},
{
}
],
"options": {
}
}

So all I had to do is to properly render the object inside a parent div :)
"< Scatter data={data} options={data.options} />"

In the backend:

1. If I set the value of pointStyle as an image (let pointImage = new Image(); pointImage.src = 'https://www.chartjs.org/docs/3.5.1/favicon.ico';) the value is ignored and the pointStyle defaults to 'circle' (in frontend it looks like this:
   pointStyle: {} ).

2. If I set the value of pointStyle as an array of images (like I did and like you did) in frontend it looks like this:
   pointStyle: [ {}, {}, {}, {}, {} ]
   And I get the following error in frontend:

helpers.canvas.ts:177 Uncaught TypeError: style.toString is not a function
at drawPointLegend (helpers.canvas.ts:177:1)
at drawPoint (helpers.canvas.ts:159:1)
at PointElement.draw (element.point.ts:99:1)
at ScatterController.draw (core.datasetController.js:724:1)
at Chart._drawDataset (core.controller.js:824:1)
at Chart._drawDatasets (core.controller.js:789:1)
at Chart.draw (core.controller.js:741:1)
at core.animator.js:89:1
at Map.forEach ()
at Animator._update (core.animator.js:60:1)

I repeat, if I'm doing all the above but directly in React the error is gone and everything is ok, as intended :)

Maybe it is impossible to bring HTMLImageElements from backend to frontend so maybe it's not a Chart.js issue :)