Remove zero values from tooltip - chart.js

Question

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:
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()"
]
}
]
}

Answer 1

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