chart.jsでグラフ要素のマウスオーバー時にカーソルをポインタに変えたい。

いつもお世話になっております。

chart.jsを使って棒グラフを表示しています。
グラフの各要素をクリックした際に、詳細情報をポップアップ表示しますが、
クリック出来る事が分かりやすいよう、カーソルをポインタに変更したいです。
pluginsを実装しましたが動作しませんでした。
お判りになる方がいらっしゃったらご教授いただけないでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　<title>グラフ</title> 
</head>
<body>
  <h1>棒グラフ</h1>
  <canvas id="myBarChart"></canvas>
    <script src="./Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myBarChart");
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
      datasets: [
        {
          label: 'A店 来客数',
          data: [62, 65, 93, 85, 51, 66, 47],
          backgroundColor: "rgba(219,39,91,0.5)"
        },{
          label: 'B店 来客数',
          data: [55, 45, 73, 75, 41, 45, 58],
          backgroundColor: "rgba(130,201,169,0.5)"
        },{
          label: 'C店 来客数',
          data: [33, 45, 62, 55, 31, 45, 38],
          backgroundColor: "rgba(255,183,76,0.5)"
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: '支店別 来客数'
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 100,
            suggestedMin: 0,
            stepSize: 10,
            callback: function(value, index, values){
              return  value +  '人'
            }
          }
        }]
      },
      onClick: function() {
      	// クリックされたグラフ要素の情報をポップアップ表示
      	window.open("","_blank");
      },
	  plugins: {
	    datalabels: {
			listeners: {
                enter: function(context) {
                  context.hovered = true;
                  var el = document.getElementById("myBarChart");
                  el.style.cursor = "pointer";
                  return true;
                },
                leave: function(context) {
                  context.hovered = false;
                  var el = document.getElementById("myBarChart");
                  el.style.cursor = "default";
                  return true;
                },
              }
		    }
	    }
    }
  });
  </script>
</body>
</html>

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

回答1件

マニュアルを再確認したらonHoverイベントで十分できました。

            onHover : function(e, el) {
            	if (! el || el.length === 0) {
                    document.getElementById('chart').style.cursor='default';
            	} else {
                    document.getElementById('chart').style.cursor='pointer';
            	}
            },

投稿2020/02/06 00:07

anefuse

総合スコア10