Wan Mali
Wan Mali

Reputation: 15

hide labels and 0 values in chart.js?

I am beginner on this Chart.js and wanna ask, How can I hide the labels and 0 values in the bar Chart. I cannot just hide the whole Dataset since I am using a SQL Table to get the Values "into" Chart.Js. I just want the bar chart show only if the labels have the value. Need your help

sample chart

{
    {
        $.post("datachartasr.php",
        function (data)
        {
            console.log(data);
            var intake = [];
            var active = [];
            var inactive = [];
            var deffered = [];
            var widthdrawn = [];
            var dis_ter_dereg = [];
            var missing = [];
            for (var i in data) {
                intake.push(data[i].intake);
                active.push(data[i].active);
                inactive.push(data[i].inactive);
                deffered.push(data[i].deffered);
                widthdrawn.push(data[i].widthdrawn);
                dis_ter_dereg.push(data[i].dis_ter_dereg);
                missing.push(data[i].missing);
            }
            var chartdata = {
                labels: intake,
                datasets: [
                    {
                        label: 'Active Status',
                        backgroundColor: '#1E90FF',
                        borderColor: '#1E90FF',
                        hoverBackgroundColor: '#1E90FF',
                        hoverBorderColor: '#666666',
                        data: active
                    },
                    {
                        label: 'Deferred Status',
                        backgroundColor: '#708090',
                        borderColor: '#708090',
                        hoverBackgroundColor: '#708090',
                        hoverBorderColor: '#666666',
                        data: deffered
                    },
                    

.....
.....
.....

                ]                   
            };
            var graphTarget = $("#graphCanvas");
            var barGraph = new Chart(graphTarget, {
                type: 'bar',
                data: chartdata,
            });
        });
    }
}

Upvotes: 1

Views: 3925

Answers (1)

helbins23
helbins23

Reputation: 101

You can have the below function inside data labels to hide the Zero value:

options: {
  plugins: {
    datalabels: {
       display: function(context) {
          return context.dataset.data[context.dataIndex] !== 0; // or >= 1 or ...
       }
    }
  }
}

See more on this issue here https://github.com/chartjs/chartjs-plugin-datalabels/issues/6

Upvotes: 3

Related Questions