chart.js vue-chartjs chartjs-plugin-annotation の基準線を動的に変化させたい。

Question

前提・実現したいこと

chart.js vue-chartjs chartjs-plugin-annotation を使いグラフの作成をしています。
最終的にはAPIで取得したデータのレコード数に応じて、基準線を引きたいと思っています。
（最大値、最小値）

発生している問題・エラーメッセージ

ＡＰＩの実装の前に、動的に基準線の変更を行うサンプルを作ろうと思っているのですが
options. annotation.annotations[].value に渡す値を変更しても基準線は初期の値から更新されない状態です。

該当のソースコード

<template>
  <div>
      <div class="small">
      <line-chart :chart-data="datacollection" :options="options"></line-chart>
      <button @click="changevalue">btn</button>
    </div>
  </div>
</template>

<script>
import LineChart from "./LineChartjs";
export default {
  components: {
      LineChart,
    },
  data() {
    return {
      datacollection: {},
      options: {},
      anotationValue: "20",   //初期値
    };
  },

  methods:{
    changevalue(){
      this.anotationValue =10;　　　//ボタンを押して、value更新
    }
  },

  mounted() {
    (this.datacollection = {
      labels: ["January", "February", "March", "April", "May", "June"],
      datasets: [
        {
          label: "SCIOT-F2-track",
          backgroundColor: "#f67979",
          data: [10, 20, 30, 40, 50, 30],
        },
      ],
    }),
      this.options = {
        title: {
          display: true,
          fontSize: 35,

        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                min: 0,
                max: 100,
                stepSize: 10,
              },
              id: "y-axis-1",
              type: "linear",
            },
          ],

        },
        annotation: {
          annotations: [
            {
              type: "line",
              scaleID: "y-axis-1",
              mode: "horizontal",
              value: this.anotationValue,　　　// ここで更新してほしい。
              borderColor: "black",
              borderWidth: 2,
              label: {
                enabled: true,
                content: "目標",
              },
            },
          ],
        },
        responsive: true,
        maintainAspectRatio: false,
      };
  },
};
</script>

import { Line, mixins } from 'vue-chartjs'
import chartjsPluginAnnotation from 'chartjs-plugin-annotation'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],

  mounted() {
    this.addPlugin(chartjsPluginAnnotation)
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  },

}

試したこと

watch: {
  chartData () {
    this.$data._chart.update()
  }
}　　　　//なんの変化もない状態

お力をお貸しください。

補足情報（FW/ツールのバージョンなど）

 "chart.js": "^2.9.3",
    "chartjs-plugin-annotation": "^0.5.7",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-chartjs": "^3.5.1"

開発環境　VS-CODE
Windows10

Answer 1

再現確認するのに苦労しました・・
chart.js@3.7.0だとvue-chartjsから使えないようでchart.js@2.9.4にして、
chartjs-plugin-annotation@1.3.1だとchart.jsの2系で使えないようでchartjs-plugin-annotation@0.5.7にして、
chartjs-plugin-annotation@0.5.7にするとchart.js@2.9.4でアノテーションが表示されないためchart.js@2.9.3にして・・

---

基本的には独自のウォッチャーを使う形になりそうに思いました。

独自のウォッチャー
（新しいデータをプッシュするのではなく）データをたくさん変更するのであれば、独自のウォッチャーを実装するのが一番良いやり方です。 必要に応じて、自分で this.$data._chart.update()または this.renderChart()を呼び出すことができます。

シンプルなwatcherの実装例:

watch: {
  chartData () {
    this.$data._chart.update()
  }
}

https://vue-chartjs.org/ja/guide/#独自のウォッチャー

オプションの中のvalueだけを変更してもウォッチャーの中から見るとvalueが変わっていなかったようですので、this.options全体を変更してみました。
( https://vue-chartjs.org/ja/guide/#例 に記載されているRandomChart.vueはthis.datacollection全体のデータを変更しているようでしたので、こちらを参考にしました)
(スプレッド構文はあまり詳しくないため適切ではないかもしれません・・)
(ウォッチャーの記述の仕方によってはオプションの中だけが変わった場合もウォッチできるのかもしれません)

// Chart.vue
    changevalue() {
      this.anotationValue = 10
      const op = { ...this.options }
      op.annotation.annotations[0].value = this.anotationValue
      this.options = op

オプションをウォッチするようにしてrenderChartすると動的に表示が変わるようになりました。
(this.$data._chart.update()だとアノテーションは動的に変わりませんでした)

// LineChartjs.js
  watch: {
    options () {
      this.renderChart(this.chartData, this.options)
    }
  }

追記です(チャートライブラリーについて)

また、モジュール関係のバージョンが古いものを利用している （"chart.js": "^2.9.3",等・・）のも気になっているところです。
xg63ex2b 様のほうで、もしグラフや、基準線、（Vueで利用できるもの）で おすすめなものがありましたら、教えていただければありがたいです。

古いパッケージは気になりますよね。
ちょっと探してみたら気になるパッケージを見つけましたので、コメントではなく、回答に追記させていただくことにしました。

vue-chart-3 is rewrite of vue-chartjs for Chart.js 3 for Vue 2 & 3, but written in Typescript and Vue Composition API.
vue-chart-3 は、Vue 2 & 3 用の Chart.js 3 の vue-chartjs のリライト版ですが、Typescript と Vue Composition API で記述されています。
https://vue-chart-3.netlify.app/guide/#introduction

https://www.npmjs.com/package/vue-chart-3

vue-chartjsがChart.js 3に対応していないのが問題だから、vue-chartjsが対応するまで待つしかないかと思っていたら、
Chart.js 3 に対応したものが別のパッケージ(vue-chart-3)として存在しているようでした。
Chart.js自体の2と3で互換性が少しなさそうな感じもしますが、古いパッケージを今から使い始めてしまうより、新しいもので開始した方が良さそうに思いました。
(試していませんが、chartjs-plugin-annotationも1系が使えるようになるかもしれませんね)

私自身、Vue.jsはほとんど使ったことがなく、、
チャートライブラリー単体で言うと、HighchartsとかD3.jsとか使ってみたことがありますが、
Vueと組み合わせるとなると、、Chart.jsが無難そうな印象を受けました。

Comments

[latte217]

xg63ex2b 様　早速回答いただきましてありがとうございます。
再現にお手間おかけして申し訳ありません・・・
私もいろいろ調べて、最終的に、上記のPackageJsonのバージョンに固定してやっと動きました。

おかげ様で、期待通りの動きが実装できました！

また、モジュール関係のバージョンが古いものを利用している
（"chart.js": "^2.9.3",等・・）のも気になっているところです。

xg63ex2b 様のほうで、もしグラフや、基準線、（Vueで利用できるもの）で
おすすめなものがありましたら、教えていただければありがたいです。

[latte217]

xg63ex2b 様
ご丁寧な情報をいただきましてありがとうございます！
追加のコメントとさせていただきます。

私も時間を見て、いろいろ試してみようと思います。
vue-chart-3　は一度テストしてみます！

ありがとうございました！