CODEWITHSUNDEEP
highcharts
arun
arun

Reputation: 307

How to hide zero values in Column chart

I am using column chart and displaying those value on top of each bar. I don't want to show the values if they are 0. How to do that? Here is my piece of code

var series = {  data: [],   
                dataLabels: {
                    enabled: true,
                    color: 'black',
                    align: 'right',
                    x: -3,
                    y: 3,
                    style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                    }
                },
                pointWidth: 28
};

Upvotes: 18

Views: 41027

Answers (4)

Brandon Barkley
Brandon Barkley

Reputation: 768

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

Upvotes: 0

M H
M H

Reputation: 2183

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';
    }

Upvotes: 9

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

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

Upvotes: 13

jlbriggs
jlbriggs

Reputation: 17800

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

Upvotes: 34

Related Questions