How to use chartjs-plugin-annotation on hotwired/stimulus controller

In Rails 7, I'm trying to create a Stimulus controller to render a chart.js chart. My code looks like

# config/importmap.rb

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

pin "chart.js", to: "https://ga.jspm.io/npm:[email protected]/dist/chart.js"
pin "@kurkle/color", to: "https://ga.jspm.io/npm:@kurkle/[email protected]/dist/color.esm.js"
pin "chartjs-plugin-annotation", to: "https://ga.jspm.io/npm:[email protected]/dist/chartjs-plugin-annotation.esm.js"
pin "chart.js/helpers", to: "https://ga.jspm.io/npm:[email protected]/helpers/helpers.js"
pin "chartjs-adapter-date-fns", to: "https://ga.jspm.io/npm:[email protected]/dist/chartjs-adapter-date-fns.esm.js"
pin "@babel/runtime/helpers/esm/assertThisInitialized", to: "https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/assertThisInitialized.js"
pin "@babel/runtime/helpers/esm/classCallCheck", to: "https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/classCallCheck.js"
pin "@babel/runtime/helpers/esm/createClass", to: "https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/createClass.js"
pin "@babel/runtime/helpers/esm/createForOfIteratorHelper", to: "https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/createForOfIteratorHelper.js"
pin "@babel/runtime/helpers/esm/createSuper", to: "https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/createSuper.js"
pin "@babel/runtime/helpers/esm/defineProperty", to: "https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/defineProperty.js"
pin "@babel/runtime/helpers/esm/inherits", to: "https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/inherits.js"
pin "@babel/runtime/helpers/esm/typeof", to: "https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/typeof.js"
pin "date-fns", to: "https://ga.jspm.io/npm:[email protected]/esm/index.js"

# application/javascript/controllers/chart_controller.js

import { Controller } from "@hotwired/stimulus"
import { Chart, registerables } from "chart.js"
Chart.register(...registerables)
import annotationPlugin from "chartjs-plugin-annotation"
Chart.register(annotationPlugin)
import "chartjs-adapter-date-fns"

export default class extends Controller {
 static targets = [ "canvas" ]

 connect() {
   this.chart = new Chart(this.canvasTarget.getContext("2d"), {
     type: "line",
     data: this.chartData,
     options: {
       ...
       annotation: {
         annotations: {
           type: 'box',
           ScaleID: 'y',
           borderWidth: 0,
           drawTime: 'beforeDraw',
           xMin: '2023-09-03 10:35:17',
           xMax: '2023-09-18 10:35:17',
           yMin: 40,
           yMax: 70,
           backgroundColor: '#ecf0f1'
         } 
       }
     }
   }
 } 
}

However, the annotation box is not plotted without any error.

Am I missing anything here?

Solution

I might be wrong, but I think your annotation is one level too high and you need to give it an ID, such as box1 in the following code

    options: {
    plugins: {
      annotation: {
        annotations: {
          //Right there
          box1: {
            type: 'box',
            xMin: 1,
            xMax: 2,
            yMin: 50,
            yMax: 70,
            backgroundColor: 'rgba(255, 99, 132, 0.25)'
          }
        }
      }
    }
  }

You can find the documentation here