JSFiddle - React, Tailwind, and code Playground

HTML

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

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

<h2>pieChart</h2>

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

<h2>lineChart</h2>

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

<h2>lineWithFocusChart</h2>

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

<h2>stackedAreaChart</h2>

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

<h2>linePlusBarChart</h2>

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

<h2>cumulativeLineChart</h2>

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

<h2>multiBarHorizontalChart</h2>

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

<h2>multiBarChart</h2>

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

<h2>scatterChart</h2>

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

JavaScript

nv.addGraph(function () {
        var chart = nv.models.discreteBarChart();
        chart.color(d3.scale.category10().range());
        chart.xAxis
        chart.yAxis
        chart.tooltipContent(function (key, y, e, graph) {
            var x = String(graph.point.x);
            var y = String(graph.point.y);
            if (key == 'Serie 1') {
                var y = String(graph.point.y) + ' cal';
            }
            tooltip_str = '<center><b>' + key + '</b></center>' + y + ' at ' + x;
            return tooltip_str;
        });
        d3.select('#discreteBarChart svg')
            .datum(data_discreteBarChart)
            .transition().duration(500)
            .attr('height', 400)
            .call(chart);

        return chart;
    });
    data_discreteBarChart = [{
        'values': [{
            'y': 3,
                'x': 'A'
        }, {
            'y': 12,
                'x': 'B'
        }, {
            'y': -10,
                'x': 'C'
        }, {
            'y': 5,
                'x': 'D'
        }, {
            'y': 35,
                'x': 'E'
        }, {
            'y': -7,
                'x': 'F'
        }, {
            'y': 2,
                'x': 'G'
        }],
            'key': 'Serie 1',
            'yAxis': '1'
    }];






    nv.addGraph(function () {
        var chart = nv.models.pieChart();
        chart.x(function (d) {
            return d.x
        })
            .y(function (d) {
            return d.y
        })
            .values(function (d) {
            return d
        });
        chart.width(400);
        chart.height(400);

        chart.color(d3.scale.category20c().range());
        chart.tooltipContent(function (key, y, e, graph) {
            var x = String(key);
            var y = String(e.point.y) + ' cal';
            tooltip_str = '<center><b>' + x + '</b></center>' + y;
            return tooltip_str;
        });
        d3.select('#pieChart svg')
           ...