Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot get annotation plugin to work.

See original GitHub issue

I am trying to get the chartjs-plugin-annotation working in my test project here

Here is my Barchart.vue file, which is how I understand the plugin should be registered

<script>
import { Bar, mixins } from "vue-chartjs";
import chartJsPluginAnnotation from "chartjs-plugin-annotation";
const { reactiveProp } = mixins;

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: ["chartData", "options"],
  mounted() {
    this.addPlugin(chartJsPluginAnnotation);
    this.renderChart(this.chartData, this.options);
  },
};
</script>

This is the template for the parent component:

<template>
  <div class="small">
    <button @click="fillData()">Randomize</button>
    <bar-chart
      v-if="loaded"
      :chart-data="chartData"
      :options="chartOptions"
    />
  </div>
</template>

And this options from the data() section of the same component

data () {
    return {
      chartOptions: {
        responsive: true,
        tooltips: {
          mode: 'index',
          intersect: true
        },
        scales: {
          xAxes: [{
            id: 'time-axis',
            type: 'time',
            stacked: true,
            offset: true,
            time: {
              unit: 'week',
              tooltipFormat: 'll',
              unitStepSize: 1
            },
            scaleLabel: {
              display: true,
              labelString: 'Date'
            }
          }],
          yAxes: [{
            stacked: true
          }]
        },
        annotation: {
          drawTime: 'afterDatasetsDraw',
          annotations: [{
            id: 'vline',
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-0',
            value: '2020-09-05',
            borderColor: 'black',
            borderWidth: 5,
            label: {
              backgroundColor: 'red',
              content: 'Test Label',
              enabled: true
            }
          }]
        }
      },
      chartData: null
    }
  },

The data renders correctly and redraws on the “randomize” button as I need it to, however the annotation is not drawn.

Ideally I need the annotations to be re-rendered when the data is randomized, hence the “setAnnotation” commented out on line 115, but at the moment I’m not getting a static line at all.