Chart.js 2 の積み上げ棒グラフでツールチップアイテムの表示条件を設定 / Twin Turbo Computing

はじめに

今日は Chart.js の積み上げ棒グラフのツールチップで、filter を使って項目の表示条件を指定する方法 を紹介します。サンプルでは、値が 0 の項目を非表示にします。

使用したのは Chart.js 2.9.3 です。

目次

下準備
ツールチップアイテムの表示条件を設定
おわりに

1. 下準備

サンプルで使用した HTML と JS です。以前投稿した「Chart.js 2 で積み上げ棒グラフを実装する方法」のコードをベースにしています。

/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>積み上げ棒グラフ</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
  <script src="js/app.js"></script>
</head>
<body>
  <canvas id="chart-area" width="640" height="360"></canvas>
</body>
</html>

/app.js

window.onload = function () {
  var data = {
    labels: ['Store 1', 'Store 2', 'Store 3'],
    datasets: [
      {
        label: 'Orange',
        data: [3, 12, 9],
        backgroundColor: '#F6AD3C',
      },
      {
        label: 'Grape',
        data: [12, 0, 4],
        backgroundColor: '#A64A97',
      },
      {
        label: 'Melon',
        data: [2, 8, 4],
        backgroundColor: '#AACF52',
      },
    ]
  };

  var options = {
    legend: { position: 'right' },
    responsive: false,
    scales: {
      xAxes: [{
        scaleLabel: {
          display: true,
          fontColor: '#999',
          labelString: 'Sales Quantity'
        },
        stacked: true,
        ticks: {
          max: 24,
          stepSize: 4,
        }
      }],
      yAxes: [{
        stacked: true
      }]
    }
  };

  var ctx = document.getElementById('chart-area').getContext('2d');
  new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: options
  });
}

chart.js の CDN は下記で確認できます。
執筆時点では 3.0.0-alpha.2 がリリースされています。

Chart.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites: https://cdnjs.com/libraries/Chart.js/2.9.3
CDN (Installation · Chart.js documentation): https://www.chartjs.org/docs/latest/getting-started/installation.html#cdn

2. ツールチップアイテムの表示条件を設定

初期設定では、ツールチップには全項目が表示されます。
条件は options.tooltips.filter で指定できます。

下記のように options.tooltips の部分を追記してください。

/js/app.js

window.onload = function () {
  var data = {
    ...
  };

  var options = {
    ...
  };

  // ▼ これを追加
  options.tooltips = {
    filter: function (item, data) {
      // 値が 0 より大きいものだけを表示
      return (item.xLabel > 0);
    }
  };

  var ctx = ...
}

ツールチップの各項目は、options.tooltips.filter の関数で true を返す場合だけ表示されます。
上記コードでは X 軸の値（Sales Quantity）が 0 より大きい場合のみ表示しています。

3. おわりに

Chart.js の filter 機能ですが、公式ドキュメントに記述はあるもの、文章量は少なく、サンプルコードもありません。

Filter Callback (Tooltip · Chart.js documentation): https://www.chartjs.org/docs/latest/configuration/tooltip.html#filter-callback

参考までに、今回 filter 機能を使うにあたって、調査に使ったコードを紹介します。

関数の引数に何が入ってくるかも分からなかったので、下記のようにしてダンプしてみました。

/js/app.js

options.tooltips = {
  filter: function (foo, data) {
    console.log(foo);
    console.log(data);

    return true;
  }
};

第１引数の変数名は、中身が不明なのでとりあえず foo にしています。
（分からない方は「foo bar」で検索してみてください）

第２引数の変数名は、上記ページで data オブジェクトである旨が書かれていたのでこうしました。

また true を返しているのは、同ページに Array.prototype.filter に使える関数と書かれていたので、true で表示になると推測しました。

何かのお役にたてば幸いです。