HighCharts - Show tooltip on column where value is 0 or null

Question

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 graphs, when a column has its value equal to zero, it is no visual information about it, the column is just omitted. I want it displayed in a tooltip when the user mouses over the space of the column where the value is equal to 0.

Watch the fiddle below where it generates a bar chart with several columns with value 0, or worthless.

JsFiddle

The method where the chart runs:

GraficoBarra(arrayPropriedades, arrayDados, arrayDrillDown);

Answer 1

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.

Answer 2

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]
    ]
}