Open2

vue-chartjs移行メモ

TakuyaTakuya

vue-chartjsの3系から4系にあげる

  • vue2系を使用している場合はimportの仕方は以下のようになる(tree shaking方式を採用)
  • vue3系を使用している場合はlegacyは必要ない
import { Bar } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

その他はコンポーネントの呼び出し方が変更されている

参照: https://vue-chartjs.org/migration-to-v4/

TakuyaTakuya

chart.jsの変更点(自分が該当した部分)

ticks: {
  fontColor: '#ccc' → color: '#ccc' // となる
}

と記述

grid線(横線、縦線)の色も同様

grid: {
  color: '#ccc'
}
  • [x/y]Axes内にあったzeroLine*オブションが削除されたのでスタートの線の色を変更したい場合は以下のように記述しないといけなくなった
grid: {
    color: (context) => {
        if (context.tick.value === 0) return '#cccccc'
        return '#ffffff'
    }
}

書き方の参照: https://www.chartjs.org/docs/latest/samples/scale-options/grid.html

legend,title,tootipプロパティの記述位置などが変更になってます
参照:https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#specific-changes