0

Trying to create two nested/stacked rings using nvd3. I found this thread but seems like I'd have to sort of re-invent lot of things in order to get the dynamic features that are included in the nvd3 module. I'm trying to do some thing like the PieMix with one outer and inner rings. Looks like nvd3 has a 'sunburst' configuration. How do I use nvd3 (or the sunburst config) to create nested/stacked rings? I need be able to have the dynamic features like dynamic data-loading and etc. that nvd3 provides.

Here's how my data looks like:

var outerRing = [{title: test1, color: '#0ff000', score: 3.2}, {title: test2, color: '#0fffff', score: 6.9}, {title: test3, color: '#00000', score: 7.9}]
var innerRing = [{title: GOOD, score: 5}, {title: BAD, score: 95}]

Thanks!

Community
  • 1
  • 1
user2994871
  • 177
  • 2
  • 13
  • Did you even manage to get this working? – superphonic Dec 21 '16 at 11:47
  • Yes using CSS. Basically created two instances of the donut chart using two completely different sets of data and features (I.e color, interactive behaviors and etc). Made one smaller than other and place it inside the larger donut - all CSS hack. – user2994871 Dec 22 '16 at 13:49

1 Answers1

0

You can use the existing directive to create sunburst chart,

  <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>

DEMO

EDIT

Currently nvd3 does not have nested donuts charts. There is already a request on the github page for the same.

If you want to build your own directive/chart you can follow this link.

Community
  • 1
  • 1
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • Yes I know of the 'sunburst' option in nvd3 directive. However, seems like it might be limited and not quite what I am looking for. I have achieved this [link](http://g.recordit.co/ybe1XozyJo.gif) using css, basically two rings but as you can see it becomes misaligned when I resize the browser. How can I do the same using the 'sunburst' option? – user2994871 Nov 14 '16 at 18:03