Chart JS annotation issues

[devv3899]

I am trying to load annotation the dynamic chart that I create after receiving data from the database and I have tried all possible options but somehow the chart loads but no the annotations.

chart.js version = v2.9.4 chart-plugin-annotation.min.js version = 0.5.7

Function in JS that runs when data is receiving from db:

`

function DrawChart(timeLabelList, unitsProducedList, goalList){
if(draw_the_chart != null) draw_the_chart.destroy();

Chart.defaults.global.defaultFontColor = 'white';
var ctx = document.getElementById('draw_the_chart').getContext("2d");

draw_the_chart = new Chart(ctx, {
    type: 'line',
    //plugins: [ChartAnnotation],
    data: {
        labels: timeLabelList,
        datasets: [
            {
                label: 'Goal',
                yAxisID: 'A',
                data: goalList,
                //backgroundColor: chartColumnColorBlueSolid,
                borderColor: chartColumnColorGreenSolid,
                borderWidth: 2,
                pointStyle: 'star'
            }]
    },
    options: {
        annotation: {
            annotations: [
              {
                id: "a-line-1",
                type: "line",
                mode: "vertical",
                scaleID: "y-axis-0",
                value: "1",
                borderColor: "red",
                borderWidth: 2
              }
            ]
        },
        legend: {
            position: 'bottom',
            display: true,
        },
        elements: {
            line: {
                tension: 0
            }
        },
        scales: {
            xAxes: [{
                stacked: true,
                type: 'time',
                time: {
                    unit: 'hour'
                },
            }],
            yAxes: [{
                stacked: false,
                id: 'A',
                type: 'linear',
                position: 'right',
            }]
        },
    }
});

}
`
I tried all possible ways to register and also different ways to used the plugin but had no luck plotting it. I even used latest CDN versions but had no luck.

Can anyone help with it.

Thanks!

[stockiNail]

@devv3899 I would suggest to use CHART.JS 3.x and plugin annotation1.x because there are more recent and many bugs are solved.

I think the issue is in scaleID: "y-axis-0", because your scale id is set to id: 'A',.

Using scaleID: "A", in the plugin configuration should work.

Codepen (I used a category axis instead of time one but it should be affected the result): https://codepen.io/stockinail/pen/KKZXNQL

[devv3899]

@stockiNail Hey thanks for reply and the code pen example. I tried to use similar approach in the use case but it did not work. So i want to know that which version did you use? And how to you prefer to load the files to js? by cdn, npm install or create file and give path.

[stockiNail]

In codepen I used chartjs 2.9.4 and annotation 0.5.7.
See settings in codepen
I used jsdeliv files, cdn if I remember well

[stockiNail]

Are you able to create a codepen or jsfiddle with your use case?

[stockiNail]

Another point of attention
you used value option in plugin equals to “1” in time axis.
I am not sure if annotation version 0.5.7 is able to manage date as string which should be parsed.
Maybe you can try to use utc number or set parser option in time axis

[devv3899]

Yes Sir it worked, The last thing you mentioned was the issue. Now I wrote a function to create necessary time stamp for plot and store it in variable and then use that as a value. It works as needed.

Thank You so much.