Skip to content Skip to sidebar Skip to footer

HighCharts - Show Tooltip On Column Where Value Is 0 Or Null

I had implemented the HighCharts in the framework in my company, and I can say that we are super satisfied with it. But we have a problem, we don't know how to solve. In column gra

Solution 1:

Why not make it a shared tooltip like this:

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

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

        return s;
    },
    shared: true
},

Demo here. Note that I have added a 0 point value. If there is no point there then there is nothing to show, right?

{
    name: "2012",
    data: [
        [0, 69347.35],
        [1, 120753.55],
        [2, 0],
        [12, 95050.45]
    ]
}

Solution 2:

As @wergeld said, you need to pass 0-based values to options, otherwise you won't get displayed nothing at all. For nulls it's no possible, since this doesn't have value.

Now,you need to set minPointLength, to some value (like 10), then even 0-values will be displayed as small bars. See demo: http://jsfiddle.net/EJK4e/12/

Just to be on the same page - to display tooltip, you need point graphic, otherwise there will be no hover event for triggering tooltip to show up.


Post a Comment for "HighCharts - Show Tooltip On Column Where Value Is 0 Or Null"