CODEWITHSUNDEEP
chart.js
Capitano Giovarco
Capitano Giovarco

Reputation: 205

Remove zero values from tooltip

I use Chart.js and stack groups bar chart.

The problem is that the data contains zero values and these are shown in the tooltip making it harder to read. How can I remove them?

Screenshot: enter image description here

EDIT 1

This is the code that should return the options for the chart.

  getChartOptions(): import('chart.js').ChartOptions | undefined {
    return {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked',
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      responsive: true,
      scales: {
        xAxes: [
          {
            stacked: true,
          },
        ],
        yAxes: [
          {
            stacked: true,
          },
        ],
      },
    };
  }

EDIT 2:

  ngOnInit(): void {
    this.http.get("http://localhost:8080/")
      .subscribe((data) => {
        this.originalData = data;

        this.myChart = new Chart('myChart', {
          type: 'bar',
          data: this.getChartData(),
          options: this.getChartOptions(),
        });

      });
  }

EDIT 3:

  getChartData() {
    return {
      labels: this.originalData.labels,
      datasets: this.originalData.datasets,
    };
  }

EDIT4 - Example of what getChartData() could return:

{
   "labels":[
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July"
   ],
   "datasets":[
      {
         "label":"Dataset 1",
         "backgroundColor":"window.chartColors.red",
         "stack":"Stack 0",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      },
      {
         "label":"Dataset 2",
         "backgroundColor":"window.chartColors.blue",
         "stack":"Stack 0",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      },
      {
         "label":"Dataset 3",
         "backgroundColor":"window.chartColors.green",
         "stack":"Stack 1",
         "data":[
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()",
            "randomScalingFactor()"
         ]
      }
   ]
}

Upvotes: 2

Views: 2463

Answers (2)

GollyJer
GollyJer

Reputation: 26662

I'm not sure if this is new, as I just started using chart.js 4.3.0.
I was able to filter on the .raw key, which holds the item count.

tooltip: {
  filter: (tooltipItem) => tooltipItem.raw > 0,
}

Upvotes: 2

Niels Uitterdijk
Niels Uitterdijk

Reputation: 770

You can set a Tooltip filter. Make a simple function that only returns the label/value when the value is nonzero.

import Chart from 'chart.js';

var ctx = document.getElementById('mychart');
var data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    datasets: [{
        label: 'Label Title',
        data: [0, 0, 0, 1, 2, 3, 5],
    }]
};
var barChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            x: {stacked: true},
            y: {stacked: true},
        },
        tooltips: {
            filter: function (tooltipItem, data) {
                // data contains the charts data, make sure you select the right 
                // value. 
                var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                if (value === 0) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    }
}

https://www.chartjs.org/docs/latest/configuration/tooltip.html https://www.chartjs.org/docs/latest/configuration/tooltip.html#filter-callback

So, in other words, you need to change your getChartOptions():

getChartOptions(): import('chart.js').ChartOptions | undefined {
    return {
      title: {
        display: true,
        text: 'Chart.js Bar Chart - Stacked',
      },
      tooltips: {
        mode: 'index',
        intersect: false,
        filter: function (tooltipItem, data) {
            var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            if (value === 0) {
                return false;
            } else {
                return true;
            },
          },
      },
      responsive: true,
      scales: {
        xAxes: [
          {
            stacked: true,
          },
        ],
        yAxes: [
          {
            stacked: true,
          },
        ],
      },
    };
  }

Upvotes: 2

Related Questions