title: Chart js plugin annotation not working in vue
body: <p>I'm trying to draw a horizontal line in my chart js with annotations plugin but it doesn't seem to work.</p>
  <p>My chartjs version is 2.9.4 so i had to install with this command: npm install chartjs-plugin-annotation@0.5.7 --save</p>
  <p>After importing, if i tried registering it with <code>Chart.register(annotationPlugin)</code> it returned:</p>
  <p>TypeError: chart_js__WEBPACK_IMPORTED_MODULE_10__.Chart.register is not a function</p>
  <p>So after searching online i read that i could do:</p>
  <p><code>Chart.plugins.register(AnnotationPlugin)</code> and it seemed to work.</p>
  <p>Here's my chart configuration:</p>
  <pre><code>import BarChart from '../Charts/BarChart'
  import DetailsComponent from './Reusable/Details'
  import AnnotationPlugin from 'chartjs-plugin-annotation';
  import Chart from 'chart.js';
  
  export default {
    data() {
      return {
        aud2Chart: {
      chartdata: {
        labels: [],
        datasets: [
          {
            label: &quot;Valor da nota&quot;,
            fill: false,
            tension: false,
            pointRadius: 5,
            pointHitRadius: 10,
            pointHoverRadius: 10,
            backgroundColor: &quot;#556aff&quot;,
            data: [],
            pointBackgroundColor: []
          },
        ],
      },  
      options: {
      annotation: {
          annotations: [{
              id: 'a-line-1',
              type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-0',
              value: '15000',
              borderColor: 'red',
              borderWidth: 2,
          }]
      },
        legend: {
          onClick: null
        },
        tooltips: {
          mode: 'index',
          callbacks: {
            label(vars){
              let float = parseFloat(vars.value).toFixed(2)
              let parts = float.toString().split(&quot;.&quot;)
              parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, &quot; &quot;)
              let formatted = parts.join(&quot;.&quot;).replace('.', ',')
  
              if(vars.datasetIndex == 0){  
                return 'Valor total da nota fiscal: ' + formatted
                } else { 
                return 'Média deste momento: ' + formatted
              }
            }
          }
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
              },
            },
          ],
        },
        responsive: true,
        maintainAspectRatio: false,
      },
    },
  ...
  </code></pre>
  <p>The data of the graph isn't in the code because it comes from the api.</p>
  <p>There are no errors returned in console.</p>
  <p>I tried one of the solutions i found that was wrapping the annotation object inside a plugin{} object but it didn't work.</p>
  <p>If it matters, i'm using vue-chartjs also, so i'm importing this component to show the graph:</p>
  <pre><code>&lt;script&gt;
  import { Bar } from &quot;vue-chartjs&quot;;
  
  export default {
    extends: Bar,
    props: [&quot;chartdata&quot;, &quot;options&quot;],
    mounted() {
      this.renderChart(this.chartdata, this.options);
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Here's some of my settings:</p>
  <p>chart js version: 2.9.4
  annotations plugin version: 0.5.7
  vue-chartjs version: 3.5.1</p>
  <p>Thanks for the attention!</p>