JSFiddle - React, Tailwind, and code Playground

by petran

HTML

<link rel="stylesheet" href="http://nvd3.org/css/syntax.css">
<link rel="stylesheet" href="http://nvd3.org/css/common.css">
<script src="http://d3js.org/d3.v2.min.js"></script>
<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://nvd3.org/nv.d3.js"></script>
<svg id="test_graph"></svg>

JavaScript

var data =  [
    {
      key: "Cumulative Return",
      values: [
         { 
          "label" : "CDS / Options" ,
          "value" : 29.765957771107
         } , 
         { 
           "label" : "Cash" , 
           "value" : 0
         } , 
         { 
           "label" : "Corporate Bonds" , 
         "value" : 32.807804682612
       } , 
       { 
         "label" : "Equity" , 
         "value" : 196.45946739256
       } , 
       { 
         "label" : "Index Futures" ,
         "value" : 0.19434030906893
       } , 
       { 
         "label" : "Options" , 
         "value" : 98.079782601442
       } , 
       { 
         "label" : "Preferred" , 
         "value" : 13.925743130903
       } , 
       { 
         "label" : "Not Available" , 
         "value" : 5.1387322875705
       }
     ];


nv.addGraph(function() {
     var chart = nv.models.pieChart()
         .x(function(d) { return d.label; })
         .y(function(d) { return d.value; })
         .showLabels(true);
   
       d3.select("#test_graph")
           .datum(data)
         .transition().duration(1200)
           .call(chart);
   
     return chart;
    });