Highcharts remove zero value labels

Question

I'm implementing highcharts in my site, however is proving challenging from a presentation point of view.

My data loads fine, but for the series, some of the values are zeros. I would like to display the label when not zero, as otherwise it becomes hard to read.

I'm trying to do something like this:

plotOptions: {
   column: {
    stacking: 'normal',
    dataLabels: {
           enabled: this.value == 0 ? false : true,
       color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' }
}
}

But this is not working. I've tried using only 'this' instead of value but also doesn't pick it up. I haven't been able to find a default option from the library that would allow me to do this without having to create custom code.

I've checked a few approaches, but the zeros are in one of the series. So i still want to present the label for the values that aren't zeros for the group.

I think when one says this.y it takes the value of the entire group, and not the individual series...

Any suggestions? Clearly I'm doing something wrong!

Answer 1

Have you tried using the formatter option for dataLabels? You should be able to access your data within that and decide what the label should look like. Here you can check for zero and just return null shown below.

dataLabels: {
    enabled: true,
    color: colors[0],
    style: {
        fontWeight: 'bold'
    },
    formatter: function() {
        if (this.y != 0) {
          return this.y +'%';
        } else {
          return null;
        }
    }
}

Additionally, if you are having trouble figuring out what part of your data to look at, use console.log(this) in the formatter function so you can see the object you are working with.

Check out this working jsfiddle example: http://jsfiddle.net/VLmKK/69/

Hope that helps!

Update: Return null instead of empty string to avoid creation of an invisible label as mentioned in the comments by Brett. Thanks.

You may also not return anything on zero values.