angularjsd3.jsangularjs-directivenvd3.jsangularjs-nvd3-directives

customise Donut graph using nvd3.js

I am trying to achieve the transparent color of the area with only borders in spite of color fill for a donut graph. I am using nvd3 with angularJS, but unable to achieve that. Any suggestions on this as how to do this.

If there is any library - which is capable of doing so, please suggest.

Image for reference

Solution

  • The problem is the style set in nv.d3.css.

    Add this style after including nv.d3.css

    .nvd3.nv-pie path {
stroke: inherit;
stroke-width: 1px;
stroke-opacity: 1;
fill: white;
}

    If you only want this to apply this to a particular pie chart add the id to the style selector.