はじめに

Chart.js (vue-chartjs) でツールチップの表示内容を変更する方法

TL;DR

  • テキストは tooltips.callbacks.xxxx で設定
    • tooltips.callbacks.title
    • tooltips.callbacks.label
    • tooltips.callbacks.footer
  • 色などを変更する場合は以下、他は Tooltip Configuration を参照
    • tooltips.backgroundColor
    • tooltips.titleFontColor
    • tooltips.bodyFontColor
    • tooltips.footerFontColor
    • tooltips.titleFontStyle
    • etc…
この記事が参考になった方
ここここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 設定方法
    2. vur-chartjs サンプル
      1. デフォルト
      2. カスタム
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.15.6
BuildVersion: 19G2021

$ node -v
v12.7.0

$ npm -v
6.14.5

$ npm ls vue chart.js vue-chartjs
├── chart.js@2.9.3
├── vue@2.6.11
└── vue-chartjs@3.5.1

詳細

参考: Tooltip · Chart.js documentation

設定方法

表示テキストを変更する場合は以下を設定

1
2
3
4
5
6
7
8
9
10
11
12
13
options: {
tooltips: {
title: (tooltipItems, data) => {
return 'my title';
},
label: (tooltipItem, data) => {
return 'my label';
},
footer: (tooltipItems, data) => {
return 'my footer';
},
},
}

TooltipItem の構造は Tooltip Item Interface に記載されている。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
// Label for the tooltip
label: string,
// Value for the tooltip
value: string,
// X Value of the tooltip (deprecated) use `value` or `label` instead
xLabel: number | string,
// Y value of the tooltip (deprecated) use `value` or `label` instead
yLabel: number | string,
// Index of the dataset the item comes from
datasetIndex: number,
// Index of this data item in the dataset
index: number,
// X position of matching point
x: number,
// Y position of matching point
y: number
}

実際の値は以下のような感じ。

1
2
3
4
5
6
7
8
9
10
11
12
// tooltips.callbacks.label での一例
tooltipItem: {
datasetIndex: 0, // データセット index
index: 2, // データ index
label: "2", // x軸値
value: "4", // y軸値
x: 198.883 // x軸座標
xLabel: 2, // x軸ラベル値(※Deprecated)
y: 266.63, // y軸座標
yLabel: 4, // x軸ラベル値(※Deprecated)
}
// ※Deprecated なので xLabel, yLabel は使わずに label, value を使うのが良い

data は以下のようなデータになっている。(チャート形式、対象コールバックなどで異なるかも)

1
2
3
4
data: {
datasets: [], // データセット
labels: [], // x軸ラベル
}

表示色などを変更する場合は以下を設定

  • tooltips.backgroundColor
  • tooltips.titleFontColor
  • tooltips.bodyFontColor
  • tooltips.footerFontColor
  • tooltips.titleFontStyle
  • etc…

※その他は Tooltip Configuration を参照

vur-chartjs サンプル

デフォルト

まずは何も設定しない場合

MyLineChart.js

1
2
3
4
5
6
7
8
9
10
11
import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;

export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted() {
this.renderChart(this.chartData, this.options);
},
};

MyLineChart.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
<div>
<MyLineChart :chart-data="datacollection" :options="options" />
</div>
</template>

<script>
import MyLineChart from '@/components/MyLineChart.js';

export default {
components: {
MyLineChart,
},
data() {
return {
datacollection: {},
options: {
tooltips: {},
},
};
},
mounted() {
this.fillData();
},
methods: {
fillData() {
this.datacollection = {
labels: [ 0, 1, 2, 3, 4 ],
datasets: [
{
label: 'Line 1',
data: [ 0, 1, 4, 9, 16 ],
},
],
};
},
},
};
</script>

表示されるツールチップは以下

カスタム

options.tooltips を設定した場合。ざっくり解説は以下。

  • callbacks.title, callbacks.label, callbacks.footer でテキストを編集
  • backgroundColor でツールチップ内の背景色を指定
  • borderColor, borderWidth でツールチップの縁取り指定
  • displayColors でツールチップ内の色凡例を非表示
  • titleFontColor, bodyFontColor, footerFontColor でテキスト色を指定
  • titleFontStyle, bodyFontStyle, footerFontStyle でテキストのスタイルを指定
    • titleFontStyle, footerFontStyle はデフォルト bold なので省略可
  • titleFontSize, bodyFontSize, footerFontSize でテキストサイズを指定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<template>
<div>
<MyLineChart :chart-data="datacollection" :options="options" />
</div>
</template>

<script>
import MyLineChart from '@/components/MyLineChart.js';

export default {
components: {
MyLineChart,
},
data() {
return {
datacollection: {},
options: {
tooltips: {
callbacks: {
title: (tooltipItem, data) => {
return `My Title`;
},
label: (tooltipItem, data) => {
return `My Label (${tooltipItem.label}, ${tooltipItem.value})`;
},
footer: (tooltipItem, data) => {
return `My Footer`;
},
},
backgroundColor: '#eee',
borderColor: '#000',
borderWidth: 3,
displayColors: false,
titleFontColor: 'red',
bodyFontColor: 'orange',
footerFontColor: 'green',
titleFontStyle: 'bold',
bodyFontStyle: 'bold',
footerFontStyle: 'bold',
titleFontSize: 16,
bodyFontSize: 14,
footerFontSize: 12,
},
},
};
},
mounted() {
this.fillData();
},
methods: {
fillData() {
this.datacollection = {
labels: [ 0, 1, 2, 3, 4 ],
datasets: [
{
label: 'Line 1',
data: [ 0, 1, 4, 9, 16 ],
},
],
};
},
},
};
</script>

表示されるツールチップは以下

まとめ

  • テキストは tooltips.callbacks.xxxx で設定
    • tooltips.callbacks.title
    • tooltips.callbacks.label
    • tooltips.callbacks.footer
  • 色などを変更する場合は以下、他は Tooltip Configuration を参照
    • tooltips.backgroundColor
    • tooltips.titleFontColor
    • tooltips.bodyFontColor
    • tooltips.footerFontColor
    • tooltips.titleFontStyle
    • etc…

その他・メモ

表示位置を変える例は以下。

参考文献

関連記事

この記事が参考になった方
ここここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list