Annotations on VueJs (v3) do not display

[timrowley-dev]

VueJs and ChartJs has always given me headaches. Some plugins work just fine but the annotations plugin simply does not render. I know the plugin registers because I can get its context but it will not render the annotation I create. I made a simple test and nothing displays.

I assume this must come down to the reactivity of Vue and the annotation options not being read properly. Any suggestions are more than welcomes please.

Furthermore, when trying to render a box annotation I get the following error in console: Cannot read properties of undefined (reading 'borderWidth').

Below code will render the chart but not the annotation.

<script>
import Chart from "chart.js/auto";
import "chartjs-adapter-moment";
import zoomPlugin from "chartjs-plugin-zoom";
import annotationPlugin from "chartjs-plugin-annotation";

Chart.register(zoomPlugin);
Chart.register(annotationPlugin);

var chart = null;
export default {
    data: () => {
        return {};
    },

    methods: {},
    mounted: async function() {
        const ctx = document.getElementById("myChart").getContext("2d");
        const options = {
            plugins: {
                autocolors: false,
                annotation: {
                    annotations: {
                        point1: {
                            type: "point",
                            xValue: 1,
                            yValue: 60,
                            backgroundColor: "rgba(255, 99, 132, 0.25)",
                        },
                    },
                },
            },
        };
        const config = {
            type: "line",
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: "My First Dataset",
                        data: [65, 59, 80, 81, 56, 55, 40],
                        fill: false,
                        borderColor: "rgb(75, 192, 192)",
                        tension: 0.1,
                    },
                ],
            },
            options,
        };
        chart = new Chart(ctx, config);
    },
};
</script>

[stockiNail]

@Onaxim I installed VueJs and created a component as you have done. I haven't installed moment adapter and zoom plugin, only Chart.js and annotation plugin.

  "dependencies": {
    "chart.js": "^3.7.0",
    "chartjs-plugin-annotation": "^1.3.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },

I've tested box and point annotations using your config and it works as expected.

Can you provide us the versions of the libs you are using?

[timrowley-dev]

I'm using Vue3 - so the issue may be there (updated title to reflect Vue version).

   "dependencies": {
    "chart.js": "^3.7.0",
    "chartjs-adapter-moment": "^1.0.0",
    "chartjs-plugin-annotation": "^1.3.1",
    "moment": "^2.29.1",
    "vue": "^3.2.29",
    "vue-router": "^4.0.12"
  },

EDIT: Disregard... I had "chartjs-plugin-annotation" installed into the folder above the folder of my Vue project - it still registered the plugin but the features just didn't work. Now I re installed it to the Vue directory (as per dependencies above) and it worked.🤦‍♂️

[stockiNail]

very good!