Placeholder on canvas of ChartJs and Angular

by

👍:0

You can trun on the legend and override the legend template to show the values in the legend

$scope.options = {
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%>: <%=segments[i].value%><%}%></li><%}%></ul>"
};

If you want to show the value only if they are 0, just add an if condition

$scope.options = {
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%if(segments[i].value === 0){%>: <%=segments[i].value%><%}}%></li><%}%></ul>"
};

Working fiddle – http://jsfiddle.net/s2t3quwp/

If all your data points are 0, you will see not chart, but you can still see the legend.

Leave a comment