JSFiddle - React, Tailwind, and code Playground

by petran

HTML

<script src="http://nvd3.org/lib/d3.v2.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>
<div class="test">
    <svg>
    </svg>
</div>

CSS

.test {
    width: 200px;
    height: 200px;
}

svg { 
    height: 100%;
    width: 100%;
}

JavaScript

var data =  [
    {
      key: "interactions",
      values: [
    {
      'label': 'FEEDBACK',
    //  y: (this.model.get('guestProfiles').active.traveler.international[0])
      'value': 8
    },
    {
      'label': "SHARE",
      //y: (this.model.get('guestProfiles').active.traveler.local[0])
      'value': 10
    },
    {
      'label': "ROOM SERVICE REQUESTS",
      //y: (this.model.get('guestProfiles').active.traveler.local[0])
      'value': 5
    },
    {
      'label': "OTHER REQUESTS",
      //y: (this.model.get('guestProfiles').active.traveler.local[0])
      'value': 4
    }
  ] 
    }];

nv.addGraph(function() {
     var chart = nv.models.pieChart()
         .x(function(d) { return d.label; })
         .y(function(d) { return d.value; }).color(['#0b7679','#20bece','#449396','#8bd4dc','#0d7779'])
         .showLabels(false).showLegend(false).margin({top:0, left:0, right:0, bottom:0});
   
       d3.select(".test > svg")
           .datum(data)
         .transition().duration(1200)
           .call(chart);
   
     return chart;
    });