pie chart using angular-nvd3 directive does not fill up the parent block

Question

I am trying to build a pie chart in a webpage driven by angularJS. I successfully made the pie chart. The parent block holding this chart is circular in shape (done by setting radius). I am trying to fit this chart completely into the block but the piechart does not completely fit into it.

Following is the code for the nvd3 element.

<div class="hollowpie {{ subject.subject_name }}">
          <nvd3-pie-chart
          id="{{ subject.subject_name }}Level"
          data="scores[$index]"
          x="xFunction()"
          y="yFunction()"
          width="100000"
          height="100000"
          color="levelcolorFunction($index)">
            <svg></svg>
          </nvd3-pie-chart>
<div>

Following is the CSS for these elements.

.hollowpie {
  position: relative;
  display: inline-block;
  width: 170px;
  height: 170px;
  margin-bottom: 22px;
  border-radius: 85px;
}

.hollowpie.Mathematics {
  background-color: rgba(243, 50, 38, 0.4);
}

.hollowpie.Science {
  background-color: rgba(80, 85, 191, 0.4);
}

.hollowpie.English {
  background-color: rgba(126, 211, 33, 0.4);
}

The data loads well and the pie chart that is being shown is exactly what I need, except for the size. I tried to adjust the width and height attributes but it does not make any difference. Is there any CSS I need to add or change?

edit 1: This is the link to the fiddle I created. http://jsfiddle.net/p6bf773L/ . I am very new to this and am unable to add the external dependency for angular-nvd3 chart directives (https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives). Please help if you can.

Hi. Thank for your response. I added a fiddle but am unable to load the angular-nvd3 external dependency. Please do help me if you can. Thanks. — srthu

cdb cdb · Accepted Answer · 2016-08-25T19:35:21

This is an old post, but here is the CDN: https://cdnjs.cloudflare.com/ajax/libs/angularjs-nvd3-directives/0.0.8/angularjs-nvd3-directives.min.js

Just put it into your head. For example:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-nvd3-directives/0.0.8/angularjs-nvd3-directives.min.js"></script>

pie chart using angular-nvd3 directive does not fill up the parent block

1 Answers