I had implemented the HighCharts in the framework in my pany, 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);

I had implemented the HighCharts in the framework in my pany, 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);

• javascript
• jquery
• css
• highcharts
• tooltip

• How do you want it to display? You y=axis starts at 0 so by definition the column of 0 has no height... – Mark Commented Apr 10, 2014 at 18:57
• Yep, but I want display the tooltip showing the value 0. – mayconfsbrito Commented Apr 10, 2014 at 19:11

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

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/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.