I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I have set the tooltip to return null for 0 values.
Below is the code snippet:
.directive('hcPie', function() {
var firstValue = 1;
return {
restrict: 'C',
replace: true,
template: '<div id="container" style="margin: 0 auto; width:70%; height: 60%;"></div>',
scope: {
item: '='
},
link: function(scope, element, attrs, filter) {
var chart = new Highcharts.Chart({
chart: {
renderTo: $(element).attr('id'),
backgroundColor: '#F8F8F8',
style: {
fontFamily: 'Verdana, Arial, sans-serif'
}
},
title: {
text: "",
},
plotOptions: {
pie: {
animation: false,
allowPointSelect: false,
dataLabels: {
enabled: true,
style: {
fontSize: '13px',
fontFamily: 'Verdana, Arial, sans-serif',
fontWeight: 'normal'
} ,
formatter:function() {
if(this.y != 0) {
return this.point.name + ':' + this.point.sizeText;
} else {
return null;
}
}
},
showInLegend: false
}
},
credits: {
enabled: false
},
tooltip: {
formatter:function() {
if(this.y != 0) {
return this.point.name + ':' + this.point.sizeText;
} else {
return null;
}
}
},
series: [{
type: 'pie',
data: [
{
name: 'Personal Files',
y: scope.item.personalUsage,
sizeText: scope.item.personalUsageSizeText
},
]
}]
});
}
}
});