0
Answer

Pie Chart Label Lines with key and y value

Kavya Durgam

Kavya Durgam
7y
199
1
I need to print the label with both key and value and also with the label line.and legends should display on the right side of the pie chart.What are the changed i have to do in js files?
  1. <head>  
  2. <meta charset="utf-8" />  
  3. <title>Angular-nvD3 Donut Charttitle>  
  4. <script>document.write('+ document.location + '" />');</script>  
  5. <link rel="stylesheet" href="style.css" />  
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>  
  7. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>  
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>  
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>  
  10. <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>  
  11. <script src="app.js">  
  12. <head>  
  13. <body ng-controller="MainCtrl">  
  14. <nvd3 options="options" data="data">  
  15. </nvd3>  
  16. </body>  
  17. </html>  
this is the code i am using in my controller
  1. var app = angular.module('plunker', ['nvd3']);  
  2.  app.controller('MainCtrl', function($scope)  
  3. {  
  4. $scope.options =  
  5. {  
  6. chart: {  
  7. type: 'pieChart',  
  8. height: 450,  
  9. x: function(d){return d.key;},  
  10. y: function(d){return d.y;},  
  11. showLabels: true,  
  12. labelsOutside: true,  
  13. legend: {  
  14. margin: { top: 5, right: 70, bottom: 5, left: 0 } } } };  
  15. $scope.xFunction = function()  
  16. {  
  17. return function(d)  
  18. {  
  19. return d.key } //.legendPosition("right"); };  
  20. $scope.yFunction = function()  
  21. {  
  22. return function(d)  
  23. {  
  24. return d.y } //.legendPosition("right"); };  
  25. $scope.data = [ { key: "One", y: 5 }, { key: "Two", y: 2 }, { key: "Three", y: 9 }, { key: "Four", y: 7 }, { key: "Five", y: 4 }, { key: "Six", y: 3 }, { key: "Seven", y: .5 } ]; });  
Please, anyone, help me..I am looking for the solution. you can run this code in plunker editor.
Next Recommended Forum