不直接在直线上悬停时，如何使用chart.js在图表中显示点圆？

Question

我有一个使用chart.js的图表，这是一条简单的线，如果将鼠标悬停在该线上，一切都正确，则在该点上将显示一个圆圈，并显示工具提示。

现在，我还希望当用户在X轴上悬停时，它将选择一个圆并在该X轴点显示该值的工具提示。

所以我添加了这个：

tooltips: {
                    intersect: false,
                    mode: "index"
}

并且它可以正常工作，现在，如果我将鼠标悬停在X轴上，我会在行上获得工具提示，但是不起作用的一件事是，我在行上没有得到“圆圈”，只有工具提示！

仅当我将鼠标悬停在直线上时，我才得到圆圈，这里有2张图片，您可以看到其中的区别：

在上图中，我直接悬停在直线上，它显示了Circle和工具提示

在该图像中，我将鼠标悬停在X轴上，如您所见，它将仅在我的行上显示工具提示，而不在圆上显示！

即使不直接悬停，如何显示圆圈？

谢谢

编辑：添加了更多代码：

ngOnInit(): void {
        this.ctx = this.myChartRef.nativeElement.getContext("2d");
        this.canvas = new Chart(this.ctx, {
            type: "scatter",
            data: {
                labels: [],
                datasets: [
                    {
                        label: "Grade",
                        data: [],
                        borderColor: "#3cba9f",
                        fill: false,
                        pointHitRadius: 10,
                        showLine: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                elements: {
                    point: {
                        radius: 0,
                        hitRadius: 10,
                        hoverRadius: 8
                    }
                },
                tooltips: {
                    displayColors: false,
                    intersect: false,
                    enabled: true,
                    mode: "index",
                    callbacks: {
                        afterBody: function([tooltipItem], data): any {
                            const multistringText = ["Points: " + tooltipItem.xLabel];
                            multistringText.push("Grade: " + tooltipItem.yLabel);

                            return multistringText;
                        },
                        label: function(tooltipItem, data): any {
                            return;
                        }
                    }
                },
                layout: {
                    padding: {
                        top: 12
                    }
                },
                legend: {
                    display: false
                },
                scales: {
                    gridLines: {
                        drawBorder: false
                    },
                    xAxes: [
                        {
                            ticks: {
                                beginAtZero: false,
                                maxTicksLimit: 8,
                                stepSize: 5,
                                callback: function(value, index, values): any {

                                    if (Math.floor(value) === value) {
                                        return value;
                                    }
                                    if (value % 5 === 0) {
                                        return value;
                                    }
                                }
                            },
                            scaleLabel: {
                                display: false
                            }
                        }
                    ],
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: false,
                                min: 1,
                                max: 6
                            },
                            scaleLabel: {
                                display: false
                            }
                        }
                    ]
                }
            }
        });
}