Support for chartjs 4.2.1
Joy-300799 opened this issue · comments
This is currently not working for Chart JS version 4.2.1. Is this support coming in future?
@Joy-300799 The plugin is already working on Chart.js 4.2.1. Can you describe what is not working?
Simple HTML with an error:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
canvas{
height: 100vh;
}
</style>
</head>
<body>
<canvas></canvas>
<script type="module">
import { Chart, registerables } from 'https://cdn.jsdelivr.net/npm/chart.js@4.2.1/+esm';
import annotation from 'https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation/+esm';
Chart.register(...registerables);
Chart.register(annotation);
const config = {
"type": "bar",
"data": {
"labels": [
"2023-03-02",
"2023-03-03",
"2023-03-04",
"2023-03-05"
],
"datasets": [
{
"label": "label 1",
"data": [
591,
576,
613,
612
],
},
]
},
"options": {
"responsive": true,
"maintainAspectRatio": false,
"borderWidth": 3,
"plugins": {
"annotation": {
"annotations": {
"goal": {
"type": "line",
"yMin": "500",
"yMax": "500",
"xMin": null,
"xMax": null,
"label": {
"content": "content",
"padding": 3,
"position": "end",
"color": "#000",
"display": true,
"backgroundColor": "red"
},
"borderColor": "red",
"borderWidth": 2
}
}
},
},
"indexAxis": "x"
}
}
const chart = new Chart(document.querySelector('canvas'), config);
chart.render();
</script>
</body>
</html>With chart.js@4.2.0 everything is okay.
Thank you very much @Arvkus .
The issue is that the annotation elements are not registered. The registration is done after the plugin registration but for some reason it's not happening. I'm having a look. What is weird is that is working with version 4.2.0 of Chart.js.
@Arvkus I'm still investigating. I have the feeling that +esm query string parameter needs the lib to be set as module (PR #838).
Anyway I was able to run your sample, setting the import map (I removed the version to get the last ones):
<script type="importmap">
{
"imports": {
"@kurkle/color": "https://cdn.jsdelivr.net/npm/@kurkle/color/+esm",
"chart.js": "https://cdn.jsdelivr.net/npm/chart.js/dist/chart.js",
"chart.js/helpers": "https://cdn.jsdelivr.net/npm/chart.js/helpers/helpers.js",
"chart-plugin-annotation": "https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.esm.js"
}
}
</script>
<script type="module">
import { Chart, registerables } from 'chart.js';
import annotation from 'chart-plugin-annotation';
Chart.register(...registerables);
Chart.register(annotation);
.....
</script>@Arvkus I went more in deep and if you try to use Chart,js version 4.1.0 (or whatever other version of Chart.js not equals to 4.2.0) it doesn't work.
Another weird thing is what is downloaded form CDN using "+esm" syntax you are using:
As you can see, even if I used Chart.js 4.1.0 version, in my FF I have 3 Chart.js "version": 4.1.0, 4.2.0 and 4.2.1.
I think that's the root cause of this issue.
It seems very similar to #786
I have the feeling that the logic used by that syntax (+esm) is not so consistent.
Thank you for investigating.
Very bizarre issues, I'll just keep an eye for any changes.
Thank you for investigating. Very bizarre issues, I'll just keep an eye for any changes.
Can you use the importmap in your app (for my curiosity)? This should solve the issue, I guess.
Lower version of chart.js is fine for me and importmap doesn't work for me because I need to support older browsers.
Just creating simple webpage has become a very frustrating experience, because it's not the only plugin that's behaving weirdly.
Just creating simple webpage has become a very frustrating experience, because it's not the only plugin that's behaving weirdly.
@Arvkus I can imagine... If I may, What are the other plugins which are behaving weirdly?
What error are you getting @Arvkus because your code seems to run fine for me 🤔
@LeeLenaleee thank you !!!! I have tested in Codepen and it's working as well: https://codepen.io/stockinail/pen/YzOOxKG. But locally, it is not. My fault that I have tested only locally. Sounds weird.
Locally it seems to work fine for me too.
Just created an empty folder, putted a file called index.html in there and pasted the code. And then open the file and it works fine
@LeeLenaleee uhm.... don't ask me why but it's working me as well.... Sure that it doesn't work last week...
@Arvkus @Joy-300799 can you check if it's working for you as well?
Sorry for confusion, forgot to specify annotation-plugin version and given example uses the newest one. Looks like 2.2.1 version fixed whatever was wrong.
Just FYI because I was curious. I changed @LeeLenaleee JSFIDDLE setting annotation plugin 2.1.2 and the exception appears!
TypeError: t is undefined
It seems something wrong in NPM registry (probably using +esm feature) even if I checked the GHA, where the 2.1.2 version was published, and I didn't find any issue/warning.
In version 2.2x nothing changed in the packaging to justify that new version is working. Mysteries of computer science.