How to show mouse pointer coordinates on mouse move in angular highchart? - highcharts

Question

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.
how we can show the tooltip on every coordinate of high chart.

Answer 1

It can be add scatter series and enabled markers, to imitate showing tooltip when axiss are crossing. Additionally, I added wrapp and extend to get a possibility to chart coordinate inside tooltip.formatter callback function.
(function(H) {
H.Tooltip.prototype.getAnchor = function(points, mouseEvent) {
var ret,
chart = this.chart,
inverted = chart.inverted,
plotTop = chart.plotTop,
plotLeft = chart.plotLeft,
plotX = 0,
plotY = 0,
yAxis,
xAxis;
points = H.splat(points);
// Pie uses a special tooltipPos
ret = points[0].tooltipPos;
// When tooltip follows mouse, relate the position to the mouse
if (this.followPointer && mouseEvent) {
if (mouseEvent.chartX === undefined) {
mouseEvent = chart.pointer.normalize(mouseEvent);
}
ret = [
mouseEvent.chartX - chart.plotLeft,
mouseEvent.chartY - plotTop
];
}
// When shared, use the average position
if (!ret) {
H.each(points, function(point) {
yAxis = point.series.yAxis;
xAxis = point.series.xAxis;
plotX += point.plotX + (!inverted && xAxis ? xAxis.left - plotLeft : 0);
plotY += (point.plotLow ? (point.plotLow + point.plotHigh) / 2 : point.plotY) +
(!inverted && yAxis ? yAxis.top - plotTop : 0); // #1151
});
plotX /= points.length;
plotY /= points.length;
ret = [
inverted ? chart.plotWidth - plotY : plotX,
this.shared && !inverted && points.length > 1 && mouseEvent ?
mouseEvent.chartY - plotTop : // place shared tooltip next to the mouse (#424)
inverted ? chart.plotHeight - plotX : plotY
];
}
// Add your event to Tooltip instances
this.event = mouseEvent;
return H.map(ret, Math.round);
}
})(Highcharts)
Highcharts.chart('container', {
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 0.1,
gridLineWidth: 1,
type: 'logarithmic',
accessibility: {
rangeDescription: 'Range: 1 to 10'
}
},
yAxis: [{
type: 'logarithmic',
minorTickInterval: 0.1,
accessibility: {
rangeDescription: 'Range: 0.1 to 1000'
}
}],
tooltip: {
followTouchMove: true,
followPointer: true,
formatter: function(mouseEvent) {
let event = mouseEvent.event
return `chartX:${event.chartX} <br> chartY:${event.chartY}`;
}
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
},
{
type: 'scatter',
data: [{
x: 1,
y: 10
}, {
x: 2,
y: 10
}, {
x: 5,
y: 10
}, {
x: 4,
y: 10
}, {
x: 8,
y: 10
}],
}
],
plotOptions: {
scatter: {
states: {
inactive: {
enabled: false
}
},
marker: {
enabled: false
},
enableMouseTracking: true,
showInLegend: false
},
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
Demo: https://jsfiddle.net/BlackLabel/t05uqfvm/