はじめに

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

TL;DR

  • Chart.Tooltip.positioners{ x, y } で表示位置を返却する関数を追加
  • options.tooltips.position に追加した key を指定
この記事が参考になった方
ここここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 表示位置
      1. vue-chartjs サンプル
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ 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
vue@2.6.12 | MIT | deps: none | versions: 301

$ npm ls chart.js
chart.js@2.9.3 | MIT | deps: 2 | versions: 38

$ npm ls vue-chartjs
vue-chartjs@3.5.1 | MIT | deps: 1 | versions: 77

詳細

表示位置

参考: Position Modes

Chart.Tooltip.positioners{ x, y } で表示位置を返却する関数を追加すれば OK。

1
2
3
Chart.Tooltip.positioners.custom = (elements, eventPosition) => {
return { x: 0, y: 0 };
};

公式の例だと分かりづらい(読み解きづらい)が、Chart.Tooltip.positioners は以下のように { x, y } を返す関数の Object になっている。
なので、同じ感じで追加すれば良いというだけ。↑の例では custom としているが、別に myTooltip などの任意の key でも OK。

1
2
3
4
Chart.Tooltip.positioners = {
average: function() { /**/ },
nearest: function() { /**/ },
}

使う側は options.tooltips.position で追加した key を指定する。

1
2
3
4
5
options: {
tooltips: {
position: 'custom',
},
},

vue-chartjs サンプル

左上に固定表示する例。


MyLineChart.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;
Chart.Tooltip.positioners.topLeft = (elements, eventPosition) => {
return {
x: 10,
y: 10,
};
};

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
40
41
<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: {
position: 'topLeft',
},
},
};
},
mounted() {
this.fillData();
},
methods: {
fillData() {
this.datacollection = {
labels: [ 0, 1, 2, 3, 4 ],
datasets: [
{
label: 'Line 1',
data: [ 0, 1, 4, 9, 16 ],
},
],
};
},
},
};
</script>

まとめ

  • Chart.Tooltip.positioners{ x, y } で表示位置を返却する関数を追加
  • options.tooltips.position に追加した key を指定

その他・メモ

背景色、フォントサイズなどを変える例もそのうち書く。

公式ドキュメント: Tooltip Configuration

参考文献

関連記事

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