Hover markers missing on disconnected graph

Question

I'm facing a problem and I am not sure if it's a bug in the highcharts plugin or a programing error.

I am using null values to draw a disconnected line graph with only one serie but it seems to be a problem with the hover markers : some of them (on the top of the first line and bottom of the second) just seem to not appear. The code is simple but i can't find what would cause this.

Here is an exemple reproducing the problem : http://jsfiddle.net/KYXQS/9/ (updated 26/02)

And here 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 make those markers reappear ?

Thanks in advance.

UPDATE 26/02 :
I've been testing other scenarios to identify the cause of this problem and here is what i found out :
- The problem occurs when lines are too close to each other (on the xAxis)
- Zoom doesn't help, even full zoomed on the place where the marker is supposed to appear does not make it appear.
- The problem occurs whenever the y values are the same or not

UPDATE 25/04 : For an example you can see the bug when trying to hover the point at [47,15] on the green series. Instead of the [47,15] point it is the [47,8] point that is "hovered" and whatever I try (like zooming exactly on it) I just can't "hover" the [47,15] point.

I've updated the jsfiddle link and the code above with more exemple to illustrate the problem.

Anyone have any idea to fix this ?

Answer 1

Bug is neither in highcharts and nor in your program. Problem is that some of the markers are hidden behind others. Have a look at http://jsfiddle.net/msjaiswal/KYXQS/10/ You will notice that at the connection point of green and blue lines, blue markers are hidden behind green ones. Try deselecting green series from legend and hidden blue markers will show up.

Enable markers in chart options like this:

           line : {
                marker :
                {
                    enabled: true,
                }
            }

Answer 2

The problem is that in Highcharts data for one series should be sorted ascending for xAxis, while your series aren't. Sort your data, and should be working.

Answer 3

I will assume that you aren't actually talking about markers since those are set to

plotOptions : { line : { marker : { enabled: false, } } },

in your example. If you want to show markers you will need to change that to enabled: true.

You are probably talking about the tooltip instead.

What you need to do is change your code to:

tooltip: {
    shared: true,
    formatter: function () {
        var s = '<b>' + this.x + '</b>';

        $.each(this.points, function (i, point) {
            s += '<br/>' + point.series.name + ': ' + point.y + 'm';
        });

        return s;
    },
},

See these doc entries and fiddles:

http://api.highcharts.com/highcharts#tooltip.shared

http://api.highcharts.com/highcharts#tooltip.formatter

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/formatter-shared/