Not show vertical line

Hi,

I’m using plugin annotation in vue-chart-js, but not show.

What’s wrong?

<graph
            ref="chartLiquid"
            v-show="!isShowing"
            v-if="oilshow == false"
            :height="180"
            :chart-data="liquid"
            :options="chartOptions"
          />

<script>
import ChartAnnotationsPlugin from "chartjs-plugin-annotation";
Chart.plugins.register(ChartAnnotationsPlugin);
</script>

this.chartOptions = {
            title: {
              display: true,
              text: responseData.map(item => item.name)
            },
            pan: {
              enabled: true,
              mode: "x"
            },
            zoom: {
              enabled: true,
              mode: "x",
              speed: 0.5
            },
            annotation: {
              events: ["click"],
              annotations: [
                {
                  type: "line",
                  mode: "vertical",
                  scaleID: "x-axis-0",
                  value: 900,
                  endValue: "1997-09-01",
                  borderColor: "red",
                  label: {
                    content: "TODAY",
                    enabled: true,
                    position: "top"
                  },
                  onWhell: function(e) {
                    console.log("veio ou não");
                  }
                }
              ]
            },

[hokiedsp]

I had the same issue and using scaleID: "x-axis-1", rather than scaleID: "x-axis-0", solved my problem, FYI .

[kenmasumitsu]

I experienced the similar issue.

In my solution is that converting this.options to pure JavaScript objects.

  mounted() {
    this.renderChart(this.chartdata, JSON.parse(JSON.stringify(this.options)));
  },

In my investigation, Vue returns data with [ob: Observer]. So that, initConfig() in chartjs-plugin-annotation did not work expectedly.

initConfig in helper.js

	function initConfig(config) {
		config = chartHelpers.configMerge(Chart.Annotation.defaults, config);
                 // Chart.Annotation.defaults is just JS object.
                 // config for the input is object with [__ob__: Observer].
                 // annotation elements are dropped in the return.  It is not expected result.