I have a Chart in which I'm taking the values with AngularJS.
When there are no Values, Angular throws it as undefined
.
And when passing these values to the Chart, the chart don't shows them (Which is fine because is the same as 0). But in the tooltip, when hover, shows the values as "Not a Number" (NaN).
How can I make it show all the NaN values as 0 (zero)?
Don't know if watching my code really helps, but here it is:
$scope.Chart = {
segmentShowStroke: false,
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
ticks: {
autoSkip: false
},
gridLines: {
display: false
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
},
gridLines: {
display: true,
color: "rgb(150,150,150)"
}
}]
},
legend: {
display: true,
position: 'top',
labels: {
usePointStyle: true,
fontColor: "white"
}
},
plugins: {
datalabels: {
color: '#171d28',
display: function(context) {
return context.dataset.data[context.dataIndex] !== 0;
},
anchor: 'center',
align: 'center',
clamp: true
},
deferred: {
yOffset: '45%',
delay: 200
}
}
};
$scope.Colors = [
{ backgroundColor: 'rgb(204,234,248)' },
{ backgroundColor: 'rgb(102,194,235)' },
{ backgroundColor: 'rgb(0,154,221)' },
{ backgroundColor: 'rgb(0,84,134)' }
];
$scope.Series = ['1 - Poor', '2 - Average', '3 - Acceptable', '4 - Good'];
$scope.Labels = ['Performance', 'Mobile Capability', 'Reporting'];
$scope.Data = [
[ ratingPerformance1, ratingMobileCapability1, ratingReporting1 ],
[ ratingPerformance2, ratingMobileCapability2, ratingReporting2 ],
[ ratingPerformance3, ratingMobileCapability3, ratingReporting3 ],
[ ratingPerformance4, ratingMobileCapability4, ratingReporting4 ]
];
Chart.js provides hooks for you to customize the content in the tooltips. They provide an example in their documentation for rounding, but you can quickly modify it to show a 0
instead of NaN
. It should roughly look like this:
$scope.Chart = {
...
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += isNaN(tooltipItem.yLabel) ? '0' : tooltipItem.yLabel;
return label;
}
}
}
}
});