Support for chartjs 4.2.1

Joy-300799 commented 1 year ago

This is currently not working for Chart JS version 4.2.1. Is this support coming in future?

stockiNail commented 1 year ago

@Joy-300799 The plugin is already working on Chart.js 4.2.1. Can you describe what is not working?

Arvkus commented 1 year ago

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.

stockiNail commented 1 year ago

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.

stockiNail commented 1 year ago

@Arvkus I'm still investigating. I have the feeling that +esm query string parameter needs the lib to be set as module (PR https://github.com/chartjs/chartjs-plugin-annotation/pull/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>

stockiNail commented 1 year ago

@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 https://github.com/chartjs/chartjs-plugin-annotation/issues/786 I have the feeling that the logic used by that syntax (+esm) is not so consistent.

Arvkus commented 1 year ago

Thank you for investigating. Very bizarre issues, I'll just keep an eye for any changes.

stockiNail commented 1 year ago

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.

Arvkus commented 1 year ago

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.

stockiNail commented 1 year ago

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?

LeeLenaleee commented 1 year ago

What error are you getting @Arvkus because your code seems to run fine for me 🤔

https://jsfiddle.net/ws4q2kr1/1/

stockiNail commented 1 year ago

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

LeeLenaleee commented 1 year ago

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

stockiNail commented 1 year ago

@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?

Arvkus commented 1 year ago

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.

stockiNail commented 1 year ago

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.

chartjs / chartjs-plugin-annotation

Support for chartjs 4.2.1 #862