chartjs-plugin-colorschemesを試してみた。

f:id:satoryu:20190202193530p:plain

ウェブの画面に棒グラフや折れ線グラフを表示するためのJavaScriptライブラリにChart.js というのがあって、とても便利。しかし、ちょっと悩ましいことがある。複数のデータをプロットする際に、それぞれの色をどうするか自分で考えなければいけないということだ。

そういった時に使えそうなプラグインを見つけたので、ここで紹介。

nagix.github.io

これはChart.jsで書くチャートのカラーパレットを提供してくれる。個別に色を指定することは必要ないのはとても嬉しい。

自分は最近はwebpackを使うようにしているので、以下のような感じにセットしてみた。

npm install chartjs
npm install chartjs-plugin-colorschemes

とした後に、使いたいところで、

import 'chartjs-plugin-colorschemes';
import Chart from 'chart.js';

new Chart(ctx, {
   // ... some definitions of chart
        options: {
            plugins: {
                colorschemes: {
                    scheme: 'brewer.Paired12'
                }
            }
        }
   });