I want to show tooltip on mouse hover of every coordinate in angular-highchart, it should show x and y axis value in tooltip or label - highcharts

Question

chart = new Chart({
chart: {
type: "line",
// height : 1000
// height: 55 + '%',
height: (9 / 16) * 100 + "%",
// width: 1200,
},
title: {
text: "",
},
credits: {
enabled: false,
},
legend: {
title: {
text: "OrderNumber",
style: {
fontStyle: BOLD,
},
},
layout: "vertical",
align: "right",
verticalAlign: "top",
borderWidth: 1,
floating: true,
backgroundColor: WHITE,
},
xAxis: {
startOnTick: true,
endOnTick: true,
title: {
text: this.xLabel,
style,
},
type: CTYPE,
gridLineColor: BLACK,
// min:
// this.chartData != undefined
// ? Math.log10(Math.ceil(Math.min(this.chartData.series) / 10) * 10)
// : this.xMin,
max: this.xMax,
gridLineWidth: 1,
lineColor: BLACK,
minorGridLineColor: BLACK,
lineWidth: 1,
tickLength: 20,
tickInterval: 1,
minorTickInterval: 0.1,
minorGridLineWidth: 0.5,
// animation: false,
labels: {
formatter: function () {
var raise = require("superscript-text");
let num = Math.log10(this.value as number).toPrecision(1);
let base = "10";
let final = base + raise(num.toString());
return final;
},
},
},
yAxis: {
startOnTick: true,
endOnTick: true,
title: {
text: this.yLabel,
style,
},
max: this.yMax,
min: this.yMin,
type: CTYPE,
lineColor: BLACK,
lineWidth: 1,
gridLineColor: BLACK,
minorGridLineColor: BLACK,
gridLineWidth: 1,
tickLength: 20,
tickInterval: 1,
minorTickInterval: 0.1,
minorGridLineWidth: 0.5,
labels: {
formatter: function () {
var raise = require("superscript-text");
let num = Math.log10(this.value as number);
let base = "10";
let final = base + raise(num.toString());
return final;
},
},
},
plotOptions: {
series: {
stickyTracking: false,
marker: {
enabled: false,
},
states: {
hover: {
enabled: false,
},
inactive: {
opacity: 1,
},
},
animation: false,
visible: true,
},
line: {
events: {
legendItemClick: function (event) {
this.selectedItemList.forEach((item) => {
if (event.target.options.id === item.product.index) {
item.product.toggleSlashEye = !item.product.toggleSlashEye;
let count = 0;
this.selectedItemList.forEach((item) => {
if (item.product.toggleSlashEye === false) count++;
});
if (count === this.selectedItemList.length) this.isSeriesVisible = true;
else this.isSeriesVisible = false;
}
});
}.bind(this),
},
},
// animation: false,
},
tooltip: {
enabled: true,
followPointer: true,
formatter: function () {
return `<b>x = ${this.y}</b> y = <b>${this.x} </b>`;
},
},
series: [],
});
currnet code status - currently I am showing tooltip on series only.
expected - I want to show the tooltip on the locations where the yaxis and xaxis graph lines cross.