Vue.js+Chart.jsにカラースキーマを適用する(chartjs-plugin-colorschemes)

vue-chartjsを使ってグラフを書いていて、
サクッと色をいい感じしたいなと思ったときの備忘録。

chartjs-plugin-colorschemesというカラーパレットプラグインがあるようなので、
Nuxt/Vueで使ってみた。

インストール

$ npm i vue-chartjs chart.js chartjs-plugin-colorschemes

$ npm i -D @types/chart.js

使い方

<template>
  <div class="chart-container">
    <div class="chart-content">
      <ChartLine
        :chartData="chartData"
        :options="chartOption"
        :styles="chartStyles"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "nuxt-property-decorator";
import { ChartData, ChartOptions, ChartDataSets } from "chart.js";

// chartjs-plugin-colorschemesのコアをインポート
import "chartjs-plugin-colorschemes/src/plugins/plugin.colorschemes";
// 利用するスキーマをインポート
import { Paired12 } from "chartjs-plugin-colorschemes/src/colorschemes/colorschemes.brewer";

@Component
export default class Graph extends Vue {
  // チャートのデータ: TODO
  private chartData: ChartData = {};
  
  // チャートのオプション
  private chartOption: ChartOptions = {
    // インポートしたスキーマを適用
    plugins: {
      colorschemes: {
        scheme: Paired12,
      },
    },
  };

  // チャートのスタイル: <canvas>のstyle属性として設定
  private chartStyles = {
    height: "100%",
    width: "100%",
  };
}
</script>

これだけで、用意されたカラースキーマを利用できる。
選べる色は以下に一覧がある。
・Color Chart | chartjs-plugin-colorschemes

トップページにもデモがあるので、まずは見てみるといいかも。
・chartjs-plugin-colorschemes

以上!!

参考にしたサイト様

• chartjs-plugin-colorschemes
• 📈 vue-chartjs