Scatter plot in Chart.js with annotations

Question

I've created a scatter plot in Chart.js v3.7.1 and I'm trying to add some label annotations (chartjs-plugin-annotation is v1.4.0) to it which don't seem to be working. I've added annotations in the past with earlier versions, but this version doesn't seem to want to add them. Not sure what am I missing. Here is my code:

<div class="row">
    <div class="col-md-8 col-md-offset-1">
         <canvas id="ph" height="400" width="300" style="display:block"></canvas>
    </div>
</div>

@section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<script type="text/javascript">

self.phGraph();
self.updatepH(phChart);
var phChart;

 self.phGraph = function () {
        var ph = document.getElementById("ph").getContext('2d');
        if (phChart != undefined) phChart.destroy();
        phChart = new Chart(ph, {
            type: 'scatter',
            data: {
               label: [],
               datasets: [
                   {
                       backgroundColor: reportColor.Blue,
                       borderColor: reportColor.Blue,
                       label: 'pH',
                       yAxisID: 'y',
                       data: [],
                       borderWidth: 1,
                       pointRadius: 5,
                       fill: false
                   },
               ]
            },
            options: {
               responsive: true,
               plugins: {
                  legend: {
                    position: 'top',
                  },
                  title: {
                    display: true,
                    text: self.selectedWell().description() + ' pH profile'
                  },
                  annotation:{
                      annotations: []
                  }
               },
               scales: {
                   x: 
                   {
                       id: 'x-axis-1',
                       title: {
                          display: true,
                          text: 'pH',
                          //color: '#911',
                          font: {
                            size: 18
                          }
                       },
                       ticks: {
                           beginAtZero: false
                       }
                   },
                   y: 
                   {
                       id: 'y-axis-1',
                        title: {
                          display: true,
                          text: 'Along hole depth from RT (ft)',
                          //color: '#911',
                          font: {
                            size: 18
                          }
                        },
                        reverse: true,
                   }
               },
               elements: {
                    point: {
                       radius: 5
                    }
               },
               legend: {
                   display: true,
                   labels: {
                       filter: (legendItem, chartData) => (!chartData.datasets[legendItem.datasetIndex].data.every(item => item === null))
                   }
               }
            }
        });
    };
    self.updatepH = function (phChart) {
        var chartPH = phChart;
        chartPH.data.labels = [];
        for (var j = 0; j < chartPH.data.datasets.length; j++) {
            chartPH.data.datasets[j].data = [];
        }

        for (let seg of segs) {
            chartPH.data.datasets[0].data.push({x: parseFloat(seg["pH"].toFixed(3)), y: parseFloat(fromSI(seg["AHD"], unit["leng"]).toFixed(1))})
        }
        console.log(chartPH.data.datasets[0].data)
        chartPH.update();
        self.phChartAnnotation(phChart);
        chartPH.update();
    };

    self.phChartAnnotation = function (phChart) {
        var chart = phChart;
        chart.options.annotation = {};
        chart.options.annotation.annotations = [];

        var count = 0;
        if(self.plotLabelList().length > 0){
            for (var i = 0; i < segs.length; i++) {
                if(count < self.plotLabelList().length){
                    if (self.plotLabelList()[count].ahd() <= parseFloat(fromSI(segs[i+1]["AHD"], unit["leng"]).toFixed(1)) && self.plotLabelList()[count].ahd() >= parseFloat(fromSI(segs[i]["AHD"], unit["leng"]).toFixed(1))) {
                        //Add labels
                        chart.options.annotation.annotations.push({                    
                            type: 'label',
                            xScaleID: "x-axis-1",
                            yScaleID: "y-axis-1",
                            yValue: parseFloat(fromSI(segs[i]["AHD"], unit["leng"]).toFixed(1)),
                            backgroundColor: 'rgba(245,245,245)',
                    
                            content: [self.plotLabelList()[count].label()],
                           textAlign: 'start',
                            font: {
                              size: 18
                            },
                        });
                        count++;
                    }
                }
            }
        }
        chart.update();
    };   

Any help would be greatly appreciated! Thanks!

Answer 1

You are trying to add the annotations directly in the options which is not supported. You have to put them where you put them in your basic empty config, in the options.plugins namespace. Also you x and y scale ID are wrong in you annotations.