I am working with two sets of data in a line chart using Highcharts. I am trying to customize the tooltip formatter, but whenever I drag a point, the tooltip starts glitching and flickering on and off repeatedly.
For reference, here is the JSFiddle link: http://jsfiddle.net/utnz2b9e/39/
The issue I am encountering is most noticeable when dragging a blue point on the right side of the chart. During dragging, the crosshair keeps switching back and forth between that point and the x-value of the last non-null data point of the other series. Moreover, the tooltip flickers, making it difficult to view.
Javascript -
var planChart;
var startDates = ["Fri, 11/6/15", "Sat, 11/7/15", "Sun, 11/8/15", "Mon, 11/9/15", "Tue, 11/10/15", "Wed, 11/11/15", "Thu, 11/12/15", "Fri, 11/13/15", "Sat, 11/14/15", "Sun, 11/15/15", "Mon, 11/16/15", "Tue, 11/17/15", "Wed, 11/18/15", "Thu, 11/19/15", "Fri, 11/20/15"];
$(function () {
planChart = {
chart: {
renderTo: 'container',
animation: false
},
title: {
text: ''
},
xAxis: {
categories: startDates,
crosshair: true,
},
yAxis: [{ // Primary yAxis
labels: {
style: {
color: '#20709e'
},
formatter:function() {
return Highcharts.numberFormat(this.value, 0, '', ',');
}
},
title: {
text: 'Data',
margin: 30,
style: {
color: '#20709e'
}
}
}, { // Secondary yAxis
gridLineWidth: 0,
labels: {
style: {
color: '#B9B9B9'
},
formatter:function() {
return Highcharts.numberFormat(this.value, 0, '', ',');
}
},
title: {
text: '',
},
opposite: true
}],
plotOptions: {
series: {
connectNulls: true,
stickyTracking: false,
marker: {
enabled: true,
symbol: 'circle'
}
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
shared: true,
formatter: function () {
var tooltipString = this.x + '<br/>';
this.points.forEach(function(point) {
if (point.series.index == 0) {
var y = Math.round(point.y);
var roundingFactor = Math.min(100, Math.pow(10, y.toString().length - 2));
tooltipString += '<span style="color:' + point.color + '">\u25CF</span> ' + '<b> ' + Math.ceil(point.y / roundingFactor) * roundingFactor + '</b><br/>';
} else if (point.series.index == 1) {
var y = Math.round(point.y);
var roundingFactor = Math.min(100, Math.pow(10, y.toString().length - 2));
tooltipString += '<span style="color:' + point.color + '">\u25CF</span> ' + '<b> ' + Math.ceil(point.y / roundingFactor) * roundingFactor + '</b><br/>';
}
})
return tooltipString;
}
},
credits: {
enabled: false
},
series: [{
name: '1',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, null, 18.3, 13.9, 9.6, 7.0, 7.0, 7.0],
draggableY: true,
yAxis: 0,
dragMinY: 0,
style: {
color: '#20709e'
}
}, {
name: '2',
data: [null, null, 20, 30, 40, 40, 30, 34, 43, null, null, null, null, null, null],
draggableY: true,
yAxis: 0,
dragMinY: 0,
style: {
color: '#20709e'
}
}]
}
$('.actualPlansPlot').highcharts(planChart);
});
}