Annotations are not displayed in Chart.js

问题

I'm sorry for my poor English.
I'm trying to display a horizontal line in a graph using vue-chartjs and chartjs-plugin-annotation.
The graph appears and the options are applied, but the horizontal line does not appear because the settings in the annotation are not working.
If anyone knows how to fix this, please let me know.
The version and code is as follows

Chart.js v2.9.4
chartjs-plugin-annotation v0.5.7

Chart.js

import { Bar } from 'vue-chartjs'
import chartjsPluginAnnotation from 'chartjs-plugin-annotation'
export default {
 extends: Bar,
 props: ["chartData", "options"],
 mounted() {
  this.addPlugin(chartjsPluginAnnotation),
  this.renderChart(this.chartData, this.options)
 }
}


**Vue**
    <template>
     <Chart :chartData="chartItems" :options="chartOptions"/>
    </template>
    
    <script>
     import Chart from './Chart.js'
     export default {
      components: {
       Chart
      },
      data() {
       return {
        chartItems: {
            labels: ["12月", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月"],
            datasets: [{
              label: "月ごとの数",
              data: [9500, 12000, 19000, 15000, 9500, 5000, 10000, 14000, 9500, 8000, 4500, 7000],
              backgroundColor: 'lightblue'
            }]
          },
    
          chartOptions: {
            legend: {
              display: false
            },
            scales: {
              xAxes: [{
                display: true,
                gridLines: {
                  display:false
                }
              }],
              yAxes: [{
                display: true,
                id: 'y-axis-0',
                position: 'right',
                ticks: {
                  beginAtZero: true,
                  maxTicksLimit: 5,
                  userCallback: (label, index, labels) => label.toLocaleString()
                },
              }]
            },
            annotation: { 
              annotations: [{ 
               type: 'line', 
               id: 'hLine', 
               mode: 'horizontal', 
               scaleID: 'y-axis-0', 
               value: 9000,
               borderWidth: 2, 
               borderColor: 'black' 
              }] 
            },
            tooltips: {
              enabled: false
            },
            animation: {
              duration: 0
            } 
          }
       }
      }
     }
    </script>

回答1:

It seems like there might be problems with the annotations library in chartjs 2.9.4, try downgrading to 2.9.3

Git issue: https://github.com/chartjs/chartjs-plugin-annotation/issues/276

来源：https://stackoverflow.com/questions/65825141/annotations-are-not-displayed-in-chart-js

标签

Vue.js

chart.js

vue-chartjs

chartjs-plugin-annotation