[Chart.js][JavaScript]再生数グラフ付きプレーヤー開発・再生位置カーソルを追加したい

前提・実現したいこと

視聴数を棒グラフ化して画面にオーバーレイ表示されるプレーヤーを開発中です。

プレーヤー部分に再生箇所を示す赤いドットを表示させようとしていて、その前段階として別ファイルにてプレーヤー上に赤ドットを表示させました。
この赤ドットをウィンドウではなく棒グラフ項目のトップに表示させる方法は可能でしょうか。
また現状では棒グラフ項目をクリックするとドットが表示されますが、ドットがロード時に表示され、マウスの動きに応じて移動（各項目のトップを移動するイメージ）させたいです。

発生している問題・エラーメッセージ

座標や項目位置を取得する方法を調べていますが、Chart.jsはバージョンによって挙動がだいぶ変わるようで現バージョンでの情報が見つけられていません。

該当のソースコード

<html>
    <head >
        <meta http-equiv="Content-Style-Type" content="text/html">
        <title>Chart.js Sample</title>
    </head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
    <body>
        <canvas id="myChart"></canvas>
        <script>
            var data_labels = [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]

            var canvas = document.getElementById( 'myChart' );
            var context = canvas.getContext('2d');
            var graph = {
                type: 'bar',
                data: {
                    labels: data_labels,
                    datasets: [{
                        label: 'Views',
                        data: [
                            35, 25, 33, 15, 18, 6, 20, 39, 12, 8, 6, 15, 35, 30, 23, 10, 8, 5, 11, 30, 35, 39, 40, 41, 32, 20, 12, 9, 3, 1
                        ],
                        backgroundColor: [
                            'rgba(99, 204, 132, 0.2)'
                        ],
                        barPercentage: 1,
                        categoryPercentage: 1,
                    }]
                },
                options: {
                    title: {
                        display: false,
                    },
                    responsive: true,
                    legend: {
                        display: false,
                    },
                    scales: {
                        x: {
                            display: false,
                        },
                        y: {
                            display: false,
                        }
                    },
                }
            };
            var myGraph = new Chart( canvas, graph );

            canvas.addEventListener ('click', function(e) {
                var item = myGraph.getElementsAtEventForMode(e, 'nearest', true);
                if ( item.length == 0 ) {
                    return;
                }
                console.log(item);
                item = item[0];
                
                var idx = item.index;

                var x_right = myGraph.chartArea.right;
                var x_left = myGraph.chartArea.left;
                var x_width = ( x_right - x_left ) / data_labels.length;
                var y_height = myGraph.chartArea.height;
                var y_top = myGraph.chartArea.top;
                var draw_x0 = x_width * idx;

                context.beginPath();
                context.arc(
                    draw_x0 + x_left,
                    y_top,
                    10,
                    0 * Math.PI / 180,
                    360 * Math.PI / 180
                );
                context.fillStyle = "red";
                context.fill();
            });
        </script>
    </body>
</html>

試したこと

補足情報（FW/ツールのバージョンなど）

Chart.js 3.5.1

将来的には以下内容を実装したいと考えています。

プレーヤー（videoタグ？）の再生位置に応じてカーソル位置を動かす

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

回答1件

ベストアンサー

公式ドキュメントのコード例を少し変えただけですが・・・

js
1(略)
2                options: {
3　　　　　　　　　　(略)
4                    plugins: {
5                        tooltip: {
6                            enabled: false,
7                            external: function(context) {
8                                var tooltipEl = document.getElementById('chartjs-tooltip');
9                                if (!tooltipEl) {
10                                    tooltipEl = document.createElement('div');
11                                    tooltipEl.id = 'chartjs-tooltip';
12
13                                    var canvas_ = document.createElement("canvas");
14                                    canvas_.height = 30;
15                                    canvas_.width = 30;
16                                    tooltipEl.appendChild(canvas_);
17                                    document.body.appendChild(tooltipEl);
18
19                                    context_ = canvas_.getContext('2d')
20                                    context_.beginPath();
21                                    context_.arc(
22                                        10,
23                                        10,
24                                        10,
25                                        0 * Math.PI / 180,
26                                        360 * Math.PI / 180
27                                    );
28                                    context_.fillStyle = "red";
29                                    context_.fill();
30                                }
31                                
32                                var tooltipModel = context.tooltip;
33                                if (tooltipModel.opacity === 0) {
34                                    tooltipEl.style.opacity = 0;
35                                    return;
36                                }
37                                // グラフ内部にカーソルがなくてもツールチップがX軸方向に動くようにするためには、以下2行の設定が必要。
38                                tooltipModel.options.intersect = false;
39                                tooltipModel.options.mode = 'x';
40
41                                var position = context.chart.canvas.getBoundingClientRect();
42                                var bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
43                                
44                                tooltipEl.style.opacity = 1;
45                                tooltipEl.style.position = 'absolute';
46                                tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX -10+ 'px';
47                                tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY -10+ 'px';
48                                tooltipEl.style.font = bodyFont.string;
49                                tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
50                                tooltipEl.style.pointerEvents = 'none';
51                            }
52                        }
53                    },
54以下略