chart.jsで要素が多いとcanvasからはみ出てしまうため、ツールチップの位置をY軸の中央に表示するよう調整したい。

chart.jsで積立棒グラフを作成しました。
要素が多いとツールチップがcanvasからはみ出てしまい、全ての要素が表示されないという問題が発生しました。
そこでこちらにて質問させて頂き、canvasの外に表示するという方法を教えて頂き、実践したのですが、そもそもツールチップの表示位置をグラフ中央に表示すれば何とかなるのではと思い色々試してみました。
例えば、下記のようにすると中央に表示する事はできるのですが、これでは棒の中央に表示は出来るけど、canvasの中央には表示が出来ないから、根本的な解決には至りませんでした。

javascript
1options: {
2    tooltips: {
3        yAlign: 'center'
4    }
5}

調べてみてもy軸、の中央に表示する方法は見つからなかったので質問させて頂きました。
ご存知の方がいましたらアドバイスお願いします。
また、これ以外にも何か良い解決方法がありましたら、そちらでも構いませんので、教えて頂けると助かります。
よろしくお願いいたします。

html
1<div style="width:100%; overflow-x:auto; overflow-y:visible">
2  <div class="barchart_container">
3    <canvas id="Chart"></canvas>
4  </div>
5</div>
6
7<script>
8  var ctx = document.getElementById("Chart").getContext('2d');
9  var Chart = new Chart(ctx, {
10  type: 'bar',
11    data: {
12      labels: ["2018/9", "2018/10", "2018/11"],
13      datasets: [
14      {
15        label: "A",
16        data: [20, 26, 1],
17      },
18      {
19        label: "B",
20        data: [28, 22, 3],
21      },
22
23      {
24        label: "C",
25        data: [15, 23, 1],
26      },
27      {
28        label: "D",
29        data: [20, 26, 1],
30      },
31      {
32        label: "E",
33        data: [28, 22, 3],
34      },
35
36      {
37        label: "F",
38        data: [15, 23, 1],
39      },
40      {
41        label: "G",
42        data: [20, 26, 1],
43      },
44      {
45        label: "H",
46        data: [28, 22, 3],
47      },
48
49      {
50        label: "I",
51        data: [15, 23, 1],
52      },
53      {
54        label: "J",
55        data: [20, 26, 1],
56      },
57      {
58        label: "K",
59        data: [28, 22, 3],
60      },
61
62      {
63        label: "L",
64        data: [15, 23, 1],
65      },
66      {
67        label: "M",
68        data: [20, 26, 1],
69      },
70      {
71        label: "N",
72        data: [28, 22, 3],
73      },
74
75      {
76        label: "O",
77        data: [15, 23, 1],
78      },
79      {
80        label: "P",
81        data: [20, 26, 1],
82      },
83      {
84        label: "Q",
85        data: [28, 22, 3],
86      },
87
88      {
89        label: "R",
90        data: [15, 23, 1],
91      },
92      {
93        label: "S",
94        data: [20, 26, 1],
95      },
96      {
97        label: "T",
98        data: [28, 22, 3],
99      },
100
101      {
102        label: "U",
103        data: [15, 23, 1],
104      },
105    ]
106  },
107  options: {
108   responsive: true,
109   tooltips: {
110      mode: 'nearest',
111      intersect: false,
112      mode: 'index',
113      yAlign: 'center'
114    },
115   scales: {
116     xAxes: [{
117       stacked: true,
118       }],
119       yAxes: [{
120         stacked: true,
121        }],
122      }
123    }
124});
125</script>

行動規範の内容に同意します

回答1件

ベストアンサー

できたっぽい！参考の公式リンク←position modeのカスタム、ただ分かりづらくて結局元ソース見る羽目に！

javascript
1// ここで"custom"というtooltipsのpositionを作成する
2Chart.Tooltip.positioners.custom = function(elements, position) {
3  if (!elements.length) {
4    return false;
5  }
6  const ps = elements[0].tooltipPosition();
7  const area = elements[0]._chart.chartArea;
8  return {
9    x: ps.x,
10    y: (area.top + area.bottom) / 2
11  };
12};
13
14var ctx = document.getElementById("Chart").getContext("2d");
15var Chart = new Chart(ctx, {
16  type: "bar",
17  data: {
18    labels: ["2018/9", "2018/10", "2018/11"],
19    datasets: [
20      {
21        label: "A",
22        data: [20, 26, 12]
23      },
24      {
25        label: "B",
26        data: [28, 22, 32]
27      },
28
29      {
30        label: "C",
31        data: [15, 23, 15]
32      },
33      {
34        label: "D",
35        data: [20, 26, 12]
36      },
37      {
38        label: "E",
39        data: [28, 22, 32]
40      },
41
42      {
43        label: "F",
44        data: [15, 23, 15]
45      },
46      {
47        label: "G",
48        data: [20, 26, 12]
49      },
50      {
51        label: "H",
52        data: [28, 22, 32]
53      },
54
55      {
56        label: "I",
57        data: [15, 23, 15]
58      },
59      {
60        label: "J",
61        data: [20, 26, 12]
62      },
63      {
64        label: "K",
65        data: [28, 22, 32]
66      },
67
68      {
69        label: "L",
70        data: [15, 23, 15]
71      },
72      {
73        label: "M",
74        data: [20, 26, 12]
75      },
76      {
77        label: "N",
78        data: [28, 22, 32]
79      },
80
81      {
82        label: "O",
83        data: [15, 23, 15]
84      },
85      {
86        label: "P",
87        data: [20, 26, 12]
88      },
89      {
90        label: "Q",
91        data: [28, 22, 32]
92      },
93
94      {
95        label: "R",
96        data: [15, 23, 15]
97      },
98      {
99        label: "S",
100        data: [20, 26, 12]
101      },
102      {
103        label: "T",
104        data: [28, 22, 32]
105      },
106
107      {
108        label: "U",
109        data: [15, 23, 15]
110      }
111    ]
112  },
113  options: {
114    responsive: true,
115    tooltips: {
116      intersect: false,
117      mode: "index",
118      position: "custom",
119      yAlign: "center"
120    },
121    scales: {
122      xAxes: [
123        {
124          stacked: true
125        }
126      ],
127      yAxes: [
128        {
129          stacked: true
130        }
131      ]
132    }
133  }
134});
135