HIGHCHART Activity guage tooltip issue - highcharts

Question

I am using highchart activity guage. but its tooltip doesn't show on hover location.It always is shown in centre. I want to show tooltip on hover series.
Here is js fiddle hover on any series.
// Uncomment to style it like Apple Watch
/*
if (!Highcharts.theme) {
Highcharts.setOptions({
chart: {
backgroundColor: 'black'
},
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
title: {
style: {
color: 'silver'
}
},
tooltip: {
style: {
color: 'silver'
}
}
});
}
// */
/**
* In the chart render event, add icons on top of the circular shapes
*/
function renderIcons() {
// Move icon
if (!this.series[0].icon) {
this.series[0].icon = this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[0].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[0].points[0].shapeArgs.innerR -
(this.series[0].points[0].shapeArgs.r - this.series[0].points[0].shapeArgs.innerR) / 2
);
// Exercise icon
if (!this.series[1].icon) {
this.series[1].icon = this.renderer.path(
['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8,
'M', 8, -8, 'L', 16, 0, 8, 8
]
)
.attr({
'stroke': '#ffffff',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[1].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[1].points[0].shapeArgs.innerR -
(this.series[1].points[0].shapeArgs.r - this.series[1].points[0].shapeArgs.innerR) / 2
);
// Stand icon
if (!this.series[2].icon) {
this.series[2].icon = this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
.attr({
'stroke': '#303030',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.add(this.series[2].group);
}
this.series[2].icon.translate(
this.chartWidth / 2 - 10,
this.plotHeight / 2 - this.series[2].points[0].shapeArgs.innerR -
(this.series[2].points[0].shapeArgs.r - this.series[2].points[0].shapeArgs.innerR) / 2
);
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
height: '100%',
},
title: {
text: '',
style: {
fontSize: '24px'
}
},
tooltip: {
positioner: function(labelWidth, labelHeight, point) {
var tooltipX, tooltipY;
console.log(point)
tooltipX = point.plotX
tooltipY = point.plotY
return {
x: tooltipX,
y: tooltipY
};
},
shadow: false,
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.8)'
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
.setOpacity(0)
.get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
.setOpacity(0)
.get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2])
.setOpacity(0)
.get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
credits: false,
series: [{
name: 'Move',
dataLabels: {
enabled: true,
borderWidth: 0,
y: -105,
x: -15,
color: 'black',
format: '{point.y}',
style: {
textTransform: 'uppercase'
}
},
data: [{
color: '#ed663f',
radius: '100%',
innerRadius: '95%',
y: 90
}]
}, {
name: 'Exercise',
dataLabels: {
enabled: true,
borderWidth: 0,
y: -85,
x: -15,
color: 'black',
format: '{point.y}',
style: {
textTransform: 'uppercase'
}
},
data: [{
color: '#2cc6f2',
radius: '80%',
innerRadius: '75%',
y: 65
}]
}, {
name: 'Stand',
dataLabels: {
enabled: true,
borderWidth: 0,
y: -70,
x: -15,
color: 'black',
format: '{point.y}',
style: {
textTransform: 'uppercase'
}
},
data: [{
color: '#fdb600',
radius: '60%',
innerRadius: '55%',
y: 50
}]
}, {
name: 'pushups',
dataLabels: {
enabled: true,
borderWidth: 0,
y: -50,
x: -15,
color: 'black',
format: '{point.y}',
style: {
textTransform: 'uppercase'
}
},
data: [{
color: '#2cc6f2',
radius: '40%',
innerRadius: '35%',
y: 44
}]
},
{
name: 'pullups',
dataLabels: {
enabled: true,
borderWidth: 0,
y: -30,
x: -15,
color: 'black',
format: '{point.y}',
style: {
textTransform: 'uppercase'
}
},
data: [{
color: '#c88ef4',
radius: '20%',
innerRadius: '15%',
y: 50
}]
}
]
});
#container {
margin: 0 auto;
max-width: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container"></div>
Thanks

Answer 1

Instead using tooltip.positioner you can set tooltip.followPointer to true:
Live demo: http://jsfiddle.net/BlackLabel/mf87qcwv/
API reference: https://api.highcharts.com/highcharts/tooltip.followPointer