0

I am using NVD3 library to plot the PIE chart using angular. This is the output :

enter image description here

svg tag is of width: 320px and height: 200px. <g> element of html is not taking full width, I did not find width property on <g> element, i tried stroke-width: 100% but did not worked. I am trying to make <g> take full available width.

Chart config : 

                 chart: {
                            type: 'pieChart',
                            height: height,
                            width: width,
                            x: function(d){return d.key;},
                            y: function(d){return d.y;},
                            showLabels: false,
                            duration: 500,
                            labelThreshold: 0.01,
                            labelSunbeamLayout: true,
                            legend: {
                                margin: {
                                    top: 5,
                                    right: 35,
                                    bottom: 5,
                                    left: 0
                                }
                            },
                            margin:{
                                left: 20
                            },
                           useInteractiveGuideline: true,    
                           interactive: true
                        }
Naveen
  • 773
  • 3
  • 17
  • 40
  • Are you trying to make the pie chart elliptical? Looks like it's trying to maintain its h/w ratio at 1. You could try increasing the height of the element. – Mr Lister Aug 04 '17 at 08:04
  • I added the cart configuration, increasing only height have same issue, if i had to increase both height and width to get legends in one line. – Naveen Aug 04 '17 at 08:39
  • Changed legend right margin to 0 to make it better. – Naveen Aug 04 '17 at 08:41
  • 1
    FYI g elements don't have a width or height. Refer to https://stackoverflow.com/questions/7620509/how-does-one-get-the-height-width-of-an-svg-group-element. If you provide a plunkr/jsfiddle, it will help people debug. – jeznag Aug 04 '17 at 09:26

0 Answers0