🗒️

【Nuxt.js】Chart.jsでグラフの色を自動で設定する(chartjs-plugin-colorschemes)

2021/04/16に公開

Nuxt

Chart.js

tech

前提条件

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

公式サイト

インストール

npm install chartjs-plugin-colorschemes

使い方

importするだけで適用されます。

<script>
import { Line } from 'vue-chartjs'
import chartjsPluginColorschemes from 'chartjs-plugin-colorschemes'

export default {
  extends: Line,
  data () {
    return {
      chartData: {
        labels: ['2021年4月', '2021年5月', '2021年6月'],
        datasets: [
          {
            label: '商品A',
            data: [10, 22, 15]
          },
          {
            label: '商品B',
            data: [5, 8, 7]
          },
          {
            label: '商品C',
            data: [20, 15, 18]
          },
          {
            label: '商品D',
            data: [15, 13, 14]
          },
          {
            label: '商品E',
            data: [18, 20, 20]
          },
          {
            label: '商品F',
            data: [8, 6, 4]
          },
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                max:25,
                min: 0
              }
            }
          ]
        },
        elements: {
          line: {
            tension: 0,
            fill: false
          }
        }
      }
    }
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

プラグインを使用しなかった場合

デフォルトでは以下のようにすべてグレーで表示されるため、各グラフ個別に色を設定する必要があります。

プラグインを使用した場合

以下のように自動でカラーテーマが設定されます。

カラーテーマを変更する

options.plugins.colorschemesでカラーテーマの設定を指定することができます。
schemeでテーマ名を指定し、reverseをtrueとすることでテーマを逆順にすることができます。

options: {
  plugins: {
    colorschemes: {
      scheme: 'tableau.Classic20',
      reverse: true
    }
  }
}

カラーテーマの一覧は公式サイトで確認できます。