как отобразить точечный круг на графике с chart.js, если не зависать прямо на линии?

Question

У меня есть диаграмма с использованием chart.js, это простая линия, и если я наведу курсор мыши на линию, все будет правильно, на точке появится кружок и появится подсказка.

Теперь я тоже хотелчто когда пользователь наводит указатель мыши на оси X, он выбирает круг и показывает всплывающую подсказку для значения в этой точке оси X.

Поэтому я добавил это:

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

и это работает правильно, теперь, если я наведу курсор на ось X, я получу всплывающую подсказку в моей строке, но одна вещь, которая не работает, это то, что я не получаю "круг" на моей линии, только всплывающую подсказку!

Я получаю круг, только если наведу курсор на линию, здесь 2 изображения, чтобы вы могли увидеть разницу:

inвышеупомянутое изображение, которое я нахожу прямо на линии, и оно показывает Круг и всплывающую подсказку

на этом изображении вместо этого я нахожусь наось 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
                            }
                        }
                    ]
                }
            }
        });
}