Vue.js. Annotation does not appear

[sshiling]

Expected Behavior

Annotation on the chart is displayed.

Actual Behavior

Annotation on the chart is not displayed.

Environment

• vue.js version: 2.6.12
• vue-chart.js version: 3.5.1
• chart.js version: 2.9.4
• npm version: 6.14.8
• chartjs-plugin-annotation: 0.5.7

ChartBar.vue

<script>
import { Bar, mixins } from 'vue-chartjs'
import chartjsPluginAnnotation from 'chartjs-plugin-annotation'

const { reactiveProp } = mixins

export default {
  name: 'ChartBar',
  extends: Bar,
  mixins: [reactiveProp],
  props: {
    chartData: { type: Object, required: true, default: () => null },
    options: { type: Object, required: false, default: () => null }
  },
  mounted () {
    this.addPlugin([chartjsPluginAnnotation])
    this.renderChart(this.chartData, this.options)
  }
}
</script>

<style scoped></style>

Page.vue

<template>
    <chart-bar
      :chart-data="chartBarData"
      :options="chartBarData.options"
      :styles="chartBarStyles"
    />
</template>

<script>
import ChartBar from 'components/charts/ChartBar'

export default {
  name: 'Page',
  meta: {
    title: 'Page Title'
  },
  components: {
    ChartBar
  },
  data: () => ({
    chartBarData: {
      labels: [
        '2020-12-01',
        '2020-12-02',
        '2020-12-03',
        '2020-12-04',
        '2020-12-05'
      ],
      datasets: [
        {
          label: 'Container 1',
          borderColor: '#e57373',
          pointBackgroundColor: 'black',
          borderWidth: 1,
          pointBorderColor: 'black',
          backgroundColor: '#e57373',
          data: [19, 31, 3, 5, 2]
        },
        {
          label: 'Container 2',
          borderColor: '#81c784',
          pointBackgroundColor: 'black',
          borderWidth: 1,
          pointBorderColor: 'black',
          backgroundColor: '#81c784',
          data: [13, 8, 21, 3, 4]
        }
      ],
      options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: true
        },
        scales: {
          xAxes: [{
            display: true,
            ticks: {
              beginAtZero: true
            }
          }],
          yAxes: [{
            id: 'yAxis',
            display: true,
            ticks: {
              beginAtZero: true
            }
          }]
        },
        annotation: {
          drawTime: 'afterDatasetsDraw',
          annotations: [{
            id: 'maxLine',
            type: 'line',
            mode: 'horizontal',
            scaleID: 'yAxis',
            value: '30',
            borderColor: '#ff00ff',
            borderWidth: 5,
            label: {
              enabled: true,
              position: 'center',
              content: '30'
            }
          }]
        }
      }
    },
    chartBarStyles: {
      height: '300px',
      position: 'relative'
    }
  })
}
</script>

<style lang="stylus" scoped></style>

I've checked these links:
https://stackoverflow.com/questions/56273630/attach-a-custom-plugin-to-vue-chart
vue-chartjs GitHub issue #86

It works on CodeSandbox
https://codesandbox.io/s/wandering-tdd-h8h0m?file=/src/App.vue
But doesn't work in my actual vue project.
I saw the same issue on the internet:
https://www.gitmemory.com/issue/apertureless/vue-chartjs/666/734989814
But can't figure out why it so.

Please could you give me a hint?
I definitely missed something.

[sshiling]

I found out that it's working with chart.js: 2.9.3, but does not with 2.9.4.

[Maelstromeous]

Confirmed this does not work on ChartJS version 2.9.4 but does on 2.9.3. Was loosing my mind until I stumbled upon this thread!

[dankell]

Can confirm the same issue with 2.9.4 compared to 2.9.3

[nb1987]

@sshiling & @dankell - I found the root cause for this issue. I filed an issue with the Chart.js repo at chartjs/Chart.js#8382 and also explained in an answer to a similar problem at https://stackoverflow.com/questions/64878459/annotation-dont-show-in-vue-chartjs/66058308#66058308

[etimberg]

Duplicate of #265