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.

Support for chartjs 4.2.1 #862

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions