JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script src="http://nvd3.org/lib/d3.v2.js"></script>
<script src="http://nvd3.org/nv.d3.js"></script>

<h2>lineWithFocusChart</h2>

<div id="lineWithFocusChart"><svg style="height:450px;"></svg></div>


<h2>lineChart</h2>

<div id="lineChart"><svg style="height:350px;"></svg></div>

<h2>stackedAreaChart</h2>

<div id="stackedAreaChart"><svg style="height:350px;"></svg></div>


<h2>MultiBarChart</h2>

<div id="MultiBarChart"><svg style="height:350px;"></svg></div>

<h2>pieChart</h2>

<div id="pieChart"><svg style="width:400px;height:400px;"></svg></div>

JavaScript

nv.addGraph(function() {
        var chart = nv.models.lineWithFocusChart();
        chart.yAxis
            .tickFormat(d3.format(',.2f'))
        chart.y2Axis
            .tickFormat(d3.format(',.2f'))
        chart.xAxis
            .tickFormat(function(d) { return d3.time.format('%d %b %y')(new Date(d)) }
)
        chart.x2Axis
            .tickFormat(function(d) { return d3.time.format('%d %b %y')(new Date(d)) }
)
        d3.select('#lineWithFocusChart svg')
            .datum(data_lineWithFocusChart)
            .transition().duration(500)
                        .call(chart);

    return chart;
});
data_lineWithFocusChart=[{"values": [{"y": 7, "x": "1365026400000000"}, {"y": 3, "x": "1365026500000000"}, {"y": -3, "x": "1365026600000000"}, {"y": 7, "x": "1365026700000000"}, {"y": 8, "x": "1365026800000000"}, {"y": -3, "x": "1365026900000000"}, {"y": 13, "x": "1365027000000000"}, {"y": 0, "x": "1365027100000000"}, {"y": 11, "x": "1365027200000000"}, {"y": 3, "x": "1365027300000000"}, {"y": 16, "x": "1365027400000000"}, {"y": 3, "x": "1365027500000000"}, {"y": 6, "x": "1365027600000000"}, {"y": 23, "x": "1365027700000000"}, {"y": 18, "x": "1365027800000000"}, {"y": 25, "x": "1365027900000000"}, {"y": 7, "x": "1365028000000000"}, {"y": 9, "x": "1365028100000000"}, {"y": 20, "x": "1365028200000000"}, {"y": 28, "x": "1365028300000000"}, {"y": 29, "x": "1365028400000000"}, {"y": 20, "x": "1365028500000000"}, {"y": 23, "x": "1365028600000000"}, {"y": 32, "x": "1365028700000000"}, {"y": 29, "x": "1365028800000000"}, {"y": 27, "x": "1365028900000000"}, {"y": 26, "x": "1365029000000000"}, {"y": 31, "x": "1365029100000000"}, {"y": 34, "x": "1365029200000000"}, {"y": 39, "x": "1365029300000000"}, {"y": 32, "x": "1365029400000000"}, {"y": 25, "x": "1365029500000000"}, {"y": 37, "x": "1365029600000000"}, {"y": 33, "x": "1365029700000000"}, {"y": 30, "x": "1365029800000000"}, {"y": 30, "x": "1365029900000000"}, {"y": 31, "x": "1365030000000000"}, {"y": 40, "x":...