Chart.js のチャートを格段に綺麗に見せるカラーパレットプラグイン

f:id:nagixx:20181126195706p:plain

動的なチャートを作って Web ページに貼り付けるのに Chart.js はとても便利ですが、難点は1つずつ色の指定をしなければいけないところです。例えばこんな感じで棒グラフを作るとして、Dataset ごとに背景色を指定する必要があります(色を指定しないとグレー一色になってしまう)。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<canvas id="myChart"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['2015年', '2016年', '2017年', '2018年'],
    datasets: [{
      label: 'Dataset 1',
      data: [4, 15, 12, 23],
      backgroundColor: 'rgb(255, 0, 0)'
    }, {
      label: 'Dataset 2',
      data: [10, 9, 3, 16],
      backgroundColor: 'rgb(0, 255, 0)'
    }, {
      label: 'Dataset 3',
      data: [12, 20, 14, 3],
      backgroundColor: 'rgb(0, 0, 255)'
    }]
  }
});
</script>

ところがここで面倒臭がって赤、緑、青でいいや、などとしてしまうと、このような絶望的な見栄えのチャートになってしまいます。

chart1

気の利いたカラーパレットをデフォルトで適用してくれれば良さそうなものの、実際のところそうはなっておらず、ページ作成者のデザインセンスがモロに出てしまうのは深刻な問題です。

そういうわけで、ここはひとつプラグインでも作るか、ということでできたのが chartjs-plugin-colorschemes です。使い方は下記の順番で .js ファイルを <head>〜</head> で読み込んでおくだけ。先ほどの backgroundColor のプロパティは削除しておきます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-colorschemes/releases/download/v0.2.0/chartjs-plugin-colorschemes.min.js"></script>

chart2

なんということでしょう。あんなにみすぼらしかったチャートが(以下略)。

現時点では、カラーパレットはデータビジュアライゼーション界隈でポピュラーな ColorBrewerTableau から拝借しております。ColorBrewer はペンシルベニア州立大学の地理学者 Cynthia A. Brewer が考案したカラーパレットで、人間の視覚を考慮して色の区分が明瞭になるように工夫されており、連続的 (Sequencial)、発散的(diversing)、定性的(Qualitative)の3つのカテゴリそれぞれに複数の色のセットが用意されています。Tableau はシアトルに本社を置くタブローソフトウェアが開発しているデータビジュアライゼーションの商用製品で、こちらもチャートでの利用に最適なカラーパレットを数多く備えています。

デフォルトでは次の brewer.Paired12 カラーパレットが自動的に適用されますが、自分で指定するには次のように 一覧から選んだカラースキーマをオプションに記述します。

brewer.Paired12:                        
var myChart = new Chart(ctx, {
  // ...
  options: {
    plugins: {
      colorschemes: {
        scheme: 'brewer.Paired12'
      }
    }
  }
});

下記にいくつかのサンプルを載せておきます。インタラクティブに動作するチュートリアルページでも色を確認しながら、ぜひ色々なカラーパレットをお試しください。

chart3

chart4

chart5

chart6