I have a problem and am not sure if this is a bug in the highcharts plugin or a programming error.
I use null values to draw an unrelated line graph with only one series, but there seems to be a problem with hover markers: some of them (at the top of the first line and the bottom of the second) just don't seem to appear. The code is simple, but I cannot find what might cause this.
Here is an example reproducing the problem: http://jsfiddle.net/KYXQS/9/ (updated 26/02)
And here is the code (updated 26/02):
$(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25, zoomType: 'xy' }, title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'; } }, plotOptions : { line : { marker : { enabled: false, } } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [{ name: 'Red', data: [[0,0],[1,1],[2,2] ,null ,[4,4],[5,5],[6,6] ,null ,[2,0],[3,1],[4,2] ,null ,[6,4],[7,5],[8,6] ,null ,[12,0],[13,1],[14,2] ,null ,[16,4],[17,5],[18,6] ,null ,[22,0],[23,1],[24,2] ,null ,[26,4],[27,5],[28,6] ,null ,[32,0],[33,1],[34,2] ,null ,[36,4],[37,5],[38,6] ,null ,[34,0],[35,1],[36,2] ,null ,[38,4],[39,5],[40,6] ,null ,[36,0],[37,1],[38,2] ,null ,[40,4],[41,5],[42,6] ,null ,[40,2],[41,2],[42,3] ,null ,[47,8],[48,10],[49,11] ], color: 'red' } ,{ name: 'Blue', data: [[2,2],[3,3],[4,4] ,null ,[8,8],[9,10],[10,12] ,null ,[4,2],[5,3],[6,4] ,null ,[10,8],[11,10],[12,12] ,null ,[14,2],[15,3],[16,4] ,null ,[20,8],[21,10],[22,12] ,null ,[24,2],[25,3],[26,4] ,null ,[30,8],[31,10],[32,12] ,null ,[34,2],[35,3],[36,4] ,null ,[40,8],[41,10],[42,12] ,null ,[36,2],[37,3],[38,4] ,null ,[42,8],[43,10],[44,12] ,null ,[38,2],[39,3],[40,4] ,null ,[44,8],[45,10],[46,12] ,null ,[42,3],[41,3],[42,4] ,null ,[49,11],[52,12],[53,12] ], color: 'blue' } ,{ name: 'Green', data: [[6,6],[7,7],[8,8] ,null ,[10,12],[11,15],[12,19] ,null ,[8,6],[9,7],[10,8] ,null ,[12,12],[13,15],[14,19] ,null ,[8,6],[9,7],[10,8] ,null ,[12,12],[13,15],[14,19] ,null ,[18,6],[19,7],[20,8] ,null ,[22,12],[23,15],[24,19] ,null ,[28,6],[29,7],[30,8] ,null ,[32,12],[33,15],[34,19] ,null ,[38,6],[39,7],[40,8] ,null ,[42,12],[43,15],[44,19] ,null ,[40,6],[41,7],[42,8] ,null ,[44,12],[45,15],[46,19] ,null ,[42,6],[43,7],[44,8] ,null ,[46,12],[47,15],[48,19] ,null ,[42,4],[45,5],[47,8] ,null ,[53,12],[54,13],[55,14] ], color: 'green' }] }); });
});
Any idea on how to return these markers?
Thanks in advance.
UPDATE 26/02:
I tested other scenarios to determine the cause of this problem, and here is what I found out:
- The problem occurs when the lines are too close to each other (on xAxis)
- The scale does not help, even a full increase in the place where the marker should be displayed is not displayed.
- The problem occurs when the y values are the same or not.
UPDATE 25/04: For example, you may see an error while trying to put a point in [47,15] on the green series. Instead of the point [47.15], this is the point [47.8], which “hangs” and everything that I try (for example, scaling on it), I just can not “point” the point [47.15].
I updated the jsfiddle link and the code above to illustrate the problem in more detail.
Anyone have an idea to fix this?