Display data labels on a pie chart in angular-chart.js
Question
I have created a pie chart using angular-chart.js and it works perfectly fine. Now I need to display the data value on each section of the pie which does not work.
I tried using Chart.PieceLabel.js and added the following piece of code in the option section. It didn't work. I am not sure how to use it with angular-chart.js because it was originally written for chart.js
pieceLabel: {
render: 'label'
}
I have used the onAnimationComplete but it doesn't seem to work. I do not get any error message. Here's my code. Where am I going wrong? Thanks for your help in advance! :)
html
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-options="options" width="500" height="300" chart-colors="colors"></canvas>
JS code
$scope.options = {
legend: {
display: true,
position: "bottom"
},
tooltipEvents: [],
showTooltips: true,
tooltipCaretSize: 0,
onAnimationComplete: function () {
this.showTooltip(this.segments, true);
}
};
$scope.data = tempData;
$scope.labels = tempLabels;
Plunker link: https://embed.plnkr.co/zlBWzJ/
1 answers
solution1
0 2018-01-30 10:03:43
In your plunker, I replaced
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
With
</script>
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>
(function(angular) { 'use strict'; angular.module('myApp', ['chart.js']) .controller('myController', [function() { var ctrl = this; ctrl.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"]; ctrl.data = [300, 500, 100]; ctrl.data.label = [300, 500, 100]; ctrl.options = { legend: { display: true, position: "bottom" }, tooltipEvents: [], showTooltips: true, tooltipCaretSize: 0, onAnimationComplete: function() { this.showTooltip(this.segments, true); }, }; }]); })(window.angular);
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> <script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> <script src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script> --> <body ng-app="myApp" ng-controller="myController as ctrl"> <canvas id="pie" class="chart chart-pie" chart-data="ctrl.data" chart-labels="ctrl.labels" chart-options="ctrl.options"> </canvas> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.