I cannot get the tootlip of my highcharts gauge to appear and stay visible and centered inside the gauge when the screen is resized.
In my fiddle you can see the tooltip appear then after a small amount of time disappear. Also, it does not remain in the center of the gauge when the window is resized.
Any help is appreciated. My JSFIDDLE is here.
gaugeChartObj = new Highcharts.Chart({
credits: false,
chart: {
renderTo: divID,
type: 'solidgauge',
marginTop: 30,
events: {
load: function(){
var p = this.series[0].points[0];
this.tooltip.refresh(p);
}
}
},
title: {
text: dataC.title,
style: {
fontSize: '16px'
}
},
exporting: {
enabled: false
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
useHTML: true,
shadow: false,
style: {
fontSize: '16px'
},
formatter: function() {
return '<div style="width:100%;text-align:center;"><span style="font-size:1.2em;font-weight:bold;">' + this.point.series.name + '</span><br/><span style="font-size:3em;color:' + Highcharts.getOptions().colors[0] + ';font-weight:bold;">' + Highcharts.numberFormat(this.y / 10, 0) + '</span>';
},
positioner: function (labelWidth) {
return {
x: 170 - labelWidth / 2,
y: 125
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{
outerRadius: '106%',
innerRadius: '94%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '12px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: true
}
},
series: [{
name: 'Subscriptions',
borderColor: Highcharts.getOptions().colors[0],
data: [{
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '100%',
y: dataC.seriesData
}]
}],
lang: {
noData: "No data to display"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#333333'
}
}
});