【Nuxt.js v2】Chart.jsでグラフ上に値ラベルを表示する(chartjs-plugin-datalabels)

前提条件

・バージョン
vue-chartjs@3.5.1
Chart.js@2.9.3
chartjs-plugin-datalabels@1.0.0

公式サイト

https://chartjs-plugin-datalabels.netlify.app/

インストール

npm install chartjs-plugin-datalabels

使い方

• importしてaddPluginするだけです。

<script>
import { Bar } from 'vue-chartjs'
import chartjsPluginDatalabels from 'chartjs-plugin-datalabels'

export default {
  extends: Bar,
  data() {
    return {
      chartData: {
        labels: ['2021年4月', '2021年5月', '2021年6月'],
        datasets: [
          {
            label: '売上',
            data: [10, 20, 15]
          }
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                min: 0
              }
            }
          ]
        }
      }
    }
  },
  mounted() {
    this.addPlugin(chartjsPluginDatalabels)
    this.renderChart(this.chartData, this.options)
  }
}
</script>

特定のチャートのdatalabelを非表示にする

chartData.datasets.datalabels.displayをfalseにするとそのチャートのdatalabelは表示されません。

<script>
import { Bar } from 'vue-chartjs'
import chartjsPluginDatalabels from 'chartjs-plugin-datalabels'

export default {
  extends: Bar,
  data () {
    return {
      chartData: {
        labels: ['2021年4月', '2021年5月', '2021年6月'],
        datasets: [
          {
            label: '売上',
            data: [10, 20, 15],
            datalabels: {
              display: false
            }
          },
          {
            label: '予算',
            data: [8, 22, 12],
            type: 'line',
            tension: 0,
            fill: false
          },
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                min: 0
              }
            }
          ]
        }
      }
    }
  },
  mounted () {
    this.addPlugin(chartjsPluginDatalabels)
    this.renderChart(this.chartData, this.options)
  }
}
</script>

特定のチャートのみdatalabelを表示する

options.plugins.datalabels.displayをfalseにすると、全てのdatalabelを非表示にできます。あとは、datalabelを表示させたいチャートのdatasets.datalabels.displayをtrueに設定します。

<script>
import { Bar } from 'vue-chartjs'
import chartjsPluginDatalabels from 'chartjs-plugin-datalabels'

export default {
  extends: Bar,
  data () {
    return {
      chartData: {
        labels: ['2021年4月', '2021年5月', '2021年6月'],
        datasets: [
          {
            label: '売上',
            data: [10, 20, 15],
            datalabels: {
              display: true
            }
          },
          {
            label: '予算',
            data: [8, 22, 12],
            type: 'line',
            tension: 0,
            fill: false
          },
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                min: 0
              }
            }
          ]
        },
        plugins: {
          datalabels: {
            display: false
          }
        }
      }
    }
  },
  mounted () {
    this.addPlugin(chartjsPluginDatalabels)
    this.renderChart(this.chartData, this.options)
  }
}
</script>

datalabelに表示するテキストを編集する

chartData.datasets.datalabels.formatterまたは、options.plugins.datalabels.formatterで、datalabelに表示されるデータを書き換えたり、%やkgなどの単位を追加したりできます。
以下のようにcontext.chart.data.labels[context.dataIndex]で、データに対応したラベルも取得できます。
(改行コード\nも効きます。)

<script>
import { Bar } from 'vue-chartjs'
import chartjsPluginDatalabels from 'chartjs-plugin-datalabels'

export default {
  extends: Bar,
  data () {
    return {
      chartData: {
        labels: ['2021年4月', '2021年5月', '2021年6月'],
        datasets: [
          {
            label: '売上',
            data: [10, 20, 15],
            datalabels: {
              formatter: (value, context) => {
                const label = context.chart.data.labels[context.dataIndex]
                return `${label}\n${value}万円`
              }
            }
          }
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                min: 0
              }
            }
          ]
        }
      }
    }
  },
  mounted () {
    this.addPlugin(chartjsPluginDatalabels)
    this.renderChart(this.chartData, this.options)
  }
}
</script>