[Solved]-How to hide zero values in Column chart-Highcharts

I ran into an issue with the answers above when using an exported class using react/typescript. The "this" that was getting into the function was the "this" for the class and not the expected one.

To solve that, I had to move the function outside of my exported class. Here is an example.

export class MyClass extends React.Component<MyClassProps,any> {
     drawChart() {
          const options = {
               ...
                series: [{
                     ...
                     dataLabels: {
                          ...
                          formatter: formatter
                     }
                }]
           }
           ...
      }
 }

 function formatter() {
      if (this.y != 0) //My use case was different, so I used this.point.value
           return this.y;
 }

Here is the answer, by how short your question is i am not full sue if the existing answers are correct.

In highcharts 0 is considered a number so it will render it on charts. But null is hidden. So when you are adding data, you have to check if the value is 0 and if it is, then change it to null.

Let me know if you have questions.

Fiddle: http://jsfiddle.net/8kr0tods/ See that may is a 0 and mar is null, and null is hidden.

    if($VAL==0)
    {
        $VAL='null';
    }

You can use datalabels formatter and add condition which check if value is bigger than zero.

http://jsfiddle.net/DdvGm/

plotOptions: {
        series: {
            dataLabels:{
                enabled:true,
                formatter:function(){
                    if(this.y > 0)
                        return this.y;
                }
            }
        }
    },

http://api.highcharts.com/highcharts#plotOptions.column.dataLabels.formatter

You can use the formatter. Something like this should do it:

dataLabels: {
  formatter:function() {
    if(this.y != 0) {
      return this.y;
    }
  }
}

http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter