How to hide Null values showing in tooltip for ECharts?

[KoushikV-Hexaware]

How to hide Null values showing in tool-tip for E Charts:

   -> In my case E chart showing  tooltip having null values which I need to avoid those null values 

showing in tooltip .Pls help on how to hide those null values in ECharts(tooltip).

[deqingli]

Hi @KoushikV-Hexaware, please provide an detailed message. such as an demo, for us to debug.

[ihakh]

like this one
this is a stacked bar chart with data only for one of the series
I add to the dataset through a SSE(Server Sent Events) and since I don't know how many item is there so I have maximum series possible.
but the null value is shown in the tooltip

[ihakh]

this code solved the issue for me:

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'cross',
    },
    formatter: function(params) {
        output = '<b>' + params[0].name + '</b><br/>'
        for (i = 0; i < params.length; i++) {
            dim = params[i].dimensionNames[params[i].encode.y[0]]
            if (dim in params[i].value){
                output += params[i].marker + params[i].seriesName + ': ' + params[i].value[dim];
                if (i != params.length - 1) { // Append a <br/> tag if not last in loop
                    output += '<br/>'
                }
            }
        }
        return output
    }
}

[Christophe31]

Chart.js have a filter function for tooltips.
Maybe this can be a good option ( https://www.chartjs.org/docs/latest/configuration/tooltip.html#filter-callback )
It would allow to hide values under a given proportion/0/null to reduce it's perceived weight for graphs with too many series…

[winsmith]

Updated @ihakh's answer for 2023:

      formatter: function (params) {
        var output = params[0].axisValueLabel + '<br/>';
        console.log(params);

        output += '<table class="w-full">';

        params.reverse().forEach(function (param) {
          const value = param.data[param.seriesIndex];
          if (value !== 0) {
            output += `<tr>
              <td>${param.marker}</td>
              <td>${param.seriesName}</td>
              <td class="text-right font-bold tabular-nums">${value}</td>
            </tr>`;
          }
        });

        return output + '</table>';
      },

Thanks a lot Ihakh!