はじめに

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