はじめに

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
$ 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

詳細

表示位置

参考: 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 を指定

その他・メモ

背景色、フォントサイズなどを変える例は以下。

参考文献

関連記事

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