---
title: "Chart.jsの凡例をクリックした時に非表示しないようにする"
description: "BoundWorksのNOTE「Chart.jsの凡例をクリックした時に非表示しないようにする」。2019-04-06公開。"
url: "https://boundworks.net/click-the-legend-chartjs/"
language: "ja"
date: "2019-04-06"
---

# Chart.jsの凡例をクリックした時に非表示しないようにする

公開: 2019-04-06

![アイキャッチ画像](https://boundworks.net/images/b0f50195416208ae57ea27178547d447.png)

みんな大好きChart.jsですが、高機能すぎて、ユーザーにとって想定外の挙動となる場合もあるようです。

Chart.jsには、凡例をクリックすると、クリックした系列や要素をグラフから非表示にできます。

この機能でグラフが読みやすくなる便利な機能です。

## 1つの系列のみのグラフの凡例を非表示にしたい

例えば、1つの系列のみで構成されたグラフの場合には、グラフが単に表示と非表示を繰り返すだけで、そのメリットがありません。

混乱しないように、あらかじめ非表示にしておきたい。そんな場合もあるかと思います。

## 凡例クリック時のコールバックが用意されている

[Chart.jsのLegend設定](https://www.chartjs.org/docs/latest/configuration/legend.html)を読むと、onClickというコールバックが用意されています。

あとは、何も返さないようにコードを書けば完了です。

```
options: {
  legend: {
    onClick: function () { return false }
  }
},
```

書き込む部分は、optionsの設定項目として入力します。今回は、onClickの時、何も返さないようにreturn falseとしました。

とてもニッチですが、どなたかの参考になれば幸いです。