Chartjs! How to remove datalabel when value is 0

Question

I have a graph with some values ​​from the database (2,1,0 ...). I would like that when the value was "0" the number would not appear on the graph, more than it would be hidden.

I tried to use this function within the yAxes ticks but it didn't work:

callback: function (datalabels) {
            if (datalabels <= 0) {
              style.display = 'none';
            }
            return datalabels;
          }

How can I do this?

Obs: Sorry for English.

async function grMeioEmpregado() {

    let agressaoFisica = 0;
    let armaBranca = 0;
    let armaFogo = 0;
    let asfixia = 0;
    let fogo = 0;
    let objetoContundente = 0;
    let veneno = 0;
    let outro = 0;
    let nCI = 0;

    const url = `/Crime/AjaxAgressaoFisica`
    const url2 = `/Crime/AjaxArmaBranca`
    const url3 = `/Crime/AjaxArmaFogo`
    const url4 = `/Crime/AjaxAsfixia`
    const url5 = `/Crime/AjaxFogo`
    const url6 = `/Crime/AjaxObjetoContundente`
    const url7 = `/Crime/AjaxVeneno`
    const url8 = `/Crime/AjaxOutroMeioEmpregado`
    const url9 = `/Crime/AjaxNCIMeioEmpregado`

    try {
        const resposta = await fetch(url);
        const resposta2 = await fetch(url2);
        const resposta3 = await fetch(url3);
        const resposta4 = await fetch(url4);
        const resposta5 = await fetch(url5);
        const resposta6 = await fetch(url6);
        const resposta7 = await fetch(url7);
        const resposta8 = await fetch(url8);
        const resposta9 = await fetch(url9);        

        const resultado = await resposta.json();
        const resultado2 = await resposta2.json();
        const resultado3 = await resposta3.json();
        const resultado4 = await resposta4.json();
        const resultado5 = await resposta5.json();
        const resultado6 = await resposta6.json();
        const resultado7 = await resposta7.json();
        const resultado8 = await resposta8.json();
        const resultado9 = await resposta9.json();        

        agressaoFisica = resultado;
        armaBranca = resultado2;
        armaFogo = resultado3;
        asfixia = resultado4;
        fogo = resultado5;
        objetoContundente = resultado6;
        veneno = resultado7;
        outro = resultado8;
        nCI = resultado9;
        

    } catch (e) {
        console.error(e);
    }

    const label = ['Agressão Física', 'Arma Branca', 'Arma de Fogo', 'Asfixia', 'Fogo',
        'Objeto Contundente', 'Veneno', 'Outro', 'NCI - Não Consta Informação'];
    const datasArr = [agressaoFisica, armaBranca, armaFogo, asfixia, fogo, objetoContundente, veneno, outro, nCI];

    const sortedData = datasArr.map((v, i) => ({
        rate: v,
        tipos: label[i]
    })).sort((o2, o1) => o1.rate - o2.rate);

    var ctx = document.getElementById('grMeioEmpregado').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: sortedData.map(o => o.tipos),
            datasets: [{
                label: 'Nº de Meios empregado',
                backgroundColor: [
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    'RGBA(178,235,242,0.56)',
                    
                ],
                borderWidth: 1,
                borderColor: 'RGBA(0,172,193,0.48)',
                hoverBackgroundColor: 'RGBA(0,172,193,0.22)',
                hoverBorderColor: 'RGBA(0,172,193,0.48)',
                data: sortedData.map(o => o.rate),
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    ticks: {    
                        autoSkip: false,
                        min: 0,
                        max: 10,
                        callback: function (value) {
                            return value + "%"
                        }
                    },
                    scaleLabel: {
                        display: true,
                        labelString: "Porcentagem"
                    }
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                    }
                }],
            },
            responsive: true,
            legend: {
                labels: {
                    fontSize: 15,
                }
            },
            animation: {
                animateScale: true,
                duration: 2000,
            },
            plugins: {
                datalabels: {
                    color: '#616161',                   
                }
            }
        }
    });
}

grMeioEmpregado();

Answer 1

You can use formatter instead of callback like below.

plugins: {
  datalabels: {
    color: '#616161',
    formatter: (value) => {
      return value > 0 ? value : '';
    }
  }
}

One of the examples is as follows.

https://jsfiddle.net/opgk246j/