はじめに
グラフ描画ライブラリ「Chart.js」には、デフォルトでツールチップが用意されていますが、実務では「サイトのデザインに合わせたい」「もっと自由にレイアウトしたい」などといった要望から、細かなスタイル調整が必要になるケースがあるかと思います。
そこで本記事では、「Chart.js」のツールチップのスタイルをカスタマイズする方法を紹介します。
デフォルトのオプションによるカスタマイズ方法
まずは、Chart.jsが標準で提供しているツールチップのカスタマイズ方法を紹介します。
スタイル変更に関連するオプション
スタイル変更に関連するオプションを一部抜粋して紹介します。
基本オプション一覧（抜粋）
ツールチップ本体関連
| オプション名 | タイプ | 説明 |
|---|---|---|
| backgroundColor | Color | ツールチップの背景色 |
| padding | Padding | ツールチップ内のパディング |
| cornerRadius | number / object | 角丸の半径 |
| borderColor | Color | ボーダー色 |
| borderWidth | number | ボーダーの太さ |
| caretSize | number | 吹き出し矢印のサイズ |
| caretPadding | number | 矢印とポイントの距離 |
ツールチップ本文関連
| オプション名 | タイプ | 説明 |
|---|---|---|
| titleColor | Color | タイトルの文字色 |
| titleFont | Font | タイトルフォント設定 |
| titleAlign | string | タイトルの水平位置 |
| titleSpacing | number | タイトル行の上下の余白 |
| titleMarginBottom | number | タイトル下部のマージン |
| bodyColor | Color | 本文の文字色 |
| bodyFont | Font | 本文のフォント設定 |
| bodyAlign | string | 本文の水平位置 |
| bodySpacing | number | 本文項目の上下のスペース |
カラーボックス関連
| オプション名 | タイプ | 説明 |
|---|---|---|
| displayColors | boolean | カラーボックスを表示するか |
| boxWidth | number | カラーボックス幅 |
| boxHeight | number | カラーボックス高さ |
| boxPadding | number | ボックスとテキストの間隔 |
| usePointStyle | boolean | カラーボックスの代わりにポイントスタイルを使用 |
デフォルトのツールチップ
デフォルトで 透過の黒背景に白文字のスタイルで表示されます。
See the Pen Chart.js ツールチップカスタマイズ by Tsuji-Yosuke (@tsuji-yosuke) on CodePen.
オプションでスタイルを変更
options.plugins.tooltipの名前空間内でオプションを指定することで、ツールチップのスタイルを変更できます。
options: {
plugins: {
tooltip: {
titleFont: {
size: 20,
},
// オプションを指定
}
}
}
See the Pen Untitled by Tsuji-Yosuke (@tsuji-yosuke) on CodePen.
デフォルトのオプションではできないこと
下記のような表現は デフォルトのオプションだけでは実現できません。
もっと細かい見た目やレイアウトを実現したい場合は、externalオプションを使うことで、ツールチップを自前で描画することが可能です。
- 任意の要素をツールチップ内に追加したい
- CSSを使ったリッチな装飾（影・擬似要素による表現など）を行いたい
- フェードイン / フェードアウト以外のアニメーションを実装したい
このような、もっと細かいスタイルや、レイアウト調整が必要な場合は、
externalオプションを利用することで、ツールチップの自由な表現が可能です。
externalオプションを使用した自由なカスタマイズ方法
実装方法
①デフォルトのツールチップを無効化する
options: {
plugins: {
tooltip: {
enabled: false, // デフォルトツールチップを無効化
}
}
}
②HTML / CSS で自由なツールチップ要素を用意する
- 特に制限なく、自由に記述して問題ありません
③externalオプションで、ツールチップの中身・位置・表示状態を制御する
options: {
plugins: {
tooltip: {
external: function(context) {
const { chart, tooltip } = context;
// ツールチップが非表示の時の状態
if (tooltip.opacity === 0) {
tooltipEl.classList.remove('is-visible');
return;
}
// 表示データをセット
const label = tooltip.dataPoints[0].label;
const value = tooltip.dataPoints[0].formattedValue;
const bgColor = tooltip.dataPoints[0].dataset.backgroundColor;
tooltipEl.querySelector('.tooltip_label').textContent = label;
tooltipEl.querySelector('.tooltip_value').textContent = value;
tooltipEl.querySelector('.tooltip_color').style.backgroundColor = bgColor;
// 位置の調整
const { offsetLeft: posX, offsetTop: posY } = chart.canvas;
tooltipEl.style.left = posX + tooltip.caretX + 'px';
tooltipEl.style.top = posY + tooltip.caretY + 'px';
// ツールチップの表示手段
tooltipEl.classList.add('is-visible');
}
}
}
実装例
See the Pen Untitled by Tsuji-Yosuke (@tsuji-yosuke) on CodePen.
まとめ
Chart.jsのツールチップのスタイルをカスタマイズする方法を紹介させていただきました。
externalオプションを使うことで、HTML / CSSをベースに、JS側では位置調整やテキストの代入のみの制御となり、自由度の高いカスタマイズが可能になります。
ぜひ参考にしていただき、実務でも活用してみてください。