Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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);
like image 875
mayconfsbrito Avatar asked Feb 03 '26 19:02

mayconfsbrito


1 Answers

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]
    ]
}
like image 120
wergeld Avatar answered Feb 05 '26 08:02

wergeld



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!