How can i make custom legend marker for google donut pie chart?

Question

I am new to angularjs and google charts, I am using google charts for donut pie charts but I have ended up with no option to change the default legend marker for donut pie charts which is a circle.

So how can I add custom legend marker to pie chart using google charts?

Here is my code (Index.html):

<body ng-controller="MainCtrl">
   <div google-chart chart="chart"></div>
</body>

Script.js:

     var app = angular.module('myApp', [ 'googlechart' ]);

      app.controller('MainCtrl', function($scope) {
         var chart1 = {};
          chart1.type = "PieChart";
          chart1.data = [
          ['Component', 'cost'],
          ['Software', 50000],
          ['Hardware', 80000]
          ];
         chart1.data.push(['Services',20000]);
         chart1.options = {
            displayExactValues: true,
            pieSliceText:'value',
            donut:'true',
            pieHole:.5,
            width: 400,
            height: 200,
           chartArea: {left:10,top:10,bottom:0,height:"100%"}
          };
          $scope.chart = chart1;

});

Any suggestions are welcome. Thanks

You will have to manually make a legend outside of the chart if you want to manipulate the shape. http://stackoverflow.com/a/13639884/661584 — Rob Schmuecker, Aug 22 '15 at 11:05
Sorry I can't but it's pretty simple. Make a separate legend in HTML in whichever way you like with the same colours as your `Pie` colours. — Rob Schmuecker, Aug 22 '15 at 11:12
@RobSchmuecker how can append that in google charts legend ? — Hassan, Aug 22 '15 at 11:14
You purposely need to omit your google charts legend and make your own in plain HTML/CSS/Javascript — Rob Schmuecker, Aug 22 '15 at 11:16
@RobSchmuecker that's what i am talking that legend in google charts load on run time then how i capture them and remove them and also add my custom one to there same place? — Hassan, Aug 22 '15 at 11:18
http://stackoverflow.com/questions/5202029/hiding-the-legend-in-google-chart shows that if you add `legend: {position: 'none'}` in your options your legend will not show up. You need to define your own colours for your data and then use that same colour to build up your own legend. — Rob Schmuecker, Aug 22 '15 at 11:20
@RobSchmuecker yes you are right but pie charts are rendered inside svg and that is rendered on runtime then how can i append my html this is the issue — Hassan, Aug 22 '15 at 11:24
here is plunker http://plnkr.co/edit/2CNK6njPJMNHiB26MZZ5?p=preview @RobSchmuecker — Hassan, Aug 22 '15 at 11:37
Here you can add colors like this http://plnkr.co/edit/phYdDsD0c4jkvpl2F2JM?p=preview and then do whatever your heart desires to make a HTML legend — Rob Schmuecker, Aug 22 '15 at 11:45
@RobSchmuecker if you have some time please give me one example how do i add custom legend to this pie chart like ' software' and its marker type is square? — Hassan, Aug 22 '15 at 11:48

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

Unfortunately this is not possible. I have exactly the same problem. The only way - is to turn off the legend - legend : 'none', and make it yourself. Details here: Google charts legend manipulation

edited May 23 '17 at 11:51

Community

1
1

answered Sep 15 '15 at 09:32

Web Master

327
1
3
13

its better to use d3 for charts instead of google charts i achieved what i wanted using d3 – Hassan Sep 15 '15 at 09:35

How can i make custom legend marker for google donut pie chart?

1 Answers1