vue-chartjsで円グラフに直接ラベルを表示する【vue-chartjs】

chart.jsには様々なプラグインが存在していて、それらを使うことでchart.jsを拡張することができます。今回はラベルを表示するための chartjs-plugin-datalabels を用いて円グラフに直接ラベルを表示します。

chart.jsのプラグインですが、vue-chartjsがchart.jsのラッパーなので、同様にプラグインも使えます。

ちなみにNuxtを使っていますが、適宜置き換えてください。

install

chart.js と vue-chartjs のインストールが必要です

npm insatll chartjs-plugin-datalabels

でラベルを表示するためのプラグインをインストールします。

円グラフを表示する

普通に円グラフを表示した場合はこのようになります。
上にラベルがあるので、どれがどれかということは分かりますが、パッと見ただけでもわかるように、円グラフ上にラベルを表示させたいと思います。

<template>
    <chart></chart>
</template>

<script>
import chart from '~/components/chart.vue'
export default {
  components:{
    chart
  }
}
</script>

<script>
import { Pie } from 'vue-chartjs'

export default {
  extends: Pie,
  data: () => ({
    chartdata: {
      datacollection: {
        labels: ['January', 'February'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: ['#FF6384','#36A2EB'],
            data: [40, 20]
          }
        ]
      }
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    }
  }),

  mounted () {
    this.renderChart(this.chartdata['datacollection'], this.options)
  }
}
</script>

円グラフ上にラベルを表示する

円グラフを定義しているファイルを書き換えていきます。

ポイントは

chartjs-plugin-datalabelsをimportする
optionsのpluginsでchartjs-plugin-datalabelsを設定する

です。

設定の仕方や項目は公式ドキュメントに乗っているので、基本的にはそこをしっかりと読めばわかると思います。

<script>
import { Pie } from 'vue-chartjs'
import * as datalabels from 'chartjs-plugin-datalabels'
export default {
  extends: Pie,
  data: () => ({
    chartdata: {
      datacollection: {
        labels: ['January', 'February'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: ['#FF6384','#36A2EB'],
            data: [40, 20]
          }
        ]
      }
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins:{
          datalabels: {
            formatter: function(value, context) {
                return context.chart.data.labels[context.dataIndex];
            },
            font: {
            weight: 'bold',
            size: 16,
            }
        }
      }
    }
  }),

  mounted () {
    this.renderChart(this.chartdata['datacollection'], this.options)
  }
}
</script>

公式ドキュメント