Chart.jsでグラフにマウスオーバーした際の選択した値を取得

やりたいこと

Chart.jsでグラフにマウスオーバーした際のラベルや値を取得します。

前提

以前に私の方で投稿したバブルチャートのサンプルソースを前提に、該当箇所を抜粋したソース例を記します。

ソース例

test_chart_bubble.html

<!--バブルチャートの箇所 -->
<canvas id="bubblechart" height="450" width="600"></canvas>
<!--選択したバブルのラベルを表示 -->
<div id="bubbleLabel"></div>

chart_bubble_test.js

//マウス移動時のイベント
    $("#bubblechart").mousemove(function (e) {
        // 描画使用したオブジェクトからelementを取得
        var element = bubbleChart.getElementAtEvent(e);
        if (element.length > 0) {
            // 選択したdatasetのラベルを表示
            $("#bubbleLabel").text( bubbleChart.config.data.datasets[element[0]._datasetIndex].label );
        }
    });

参考

円グラフの各項目にそれぞれ違うイベントをさせたい