Vue.js + Chart.jsで数値をカンマ区切りで表示する方法

Ⅰ. はじめに

タイトルの通り「Vue.js + Chart.jsで数値をカンマ区切りで表示する方法」です。

Ⅱ. やり方

1. 必要なパッケージをインストールする

npm i vue-chartjs
npm i chart.js

2. サンプルプログラムを書く

src/components/LineChart.vue

<script>
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [ reactiveProp ],
  props: [ 'options' ],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

src/App.vue

<template>
  <line-chart :chart-data="chartData" :height="100" :options="chartOptions" />
</template>

<script>
import LineChart from '@/components/LineChart.vue'

export default {
  components: {
    LineChart
  },
  data () {
    return {
      chartData: {
        labels: [ '1月1日', '1月2日', '1月3日' ],
        datasets: [
          {
            label: 'A社株価',
            // lineTension: 0,
            data: [ 100, 1000, 10000 ]
          }
        ]
      },
      chartOptions: {
        tooltips: {
          callbacks: {
            label: (tooltipItems, data) => data.datasets[0].data[tooltipItems.index].toLocaleString()
          }
        },
        scales: {
          yAxes: [
            {
              ticks: {
                // eslint-disable-next-line no-unused-vars
                userCallback: (value, index, values) => value.toLocaleString()
              }
            }
          ]
        }
      }
    }
  }
}
</script>

実行結果

その他

• Chart.js 3からカンマ区切りがデフォルトになるようです
  https://github.com/chartjs/Chart.js/pull/160#issuecomment-592526243

参考

https://github.com/chartjs/Chart.js/