JSFiddle - React, Tailwind, and code Playground

by Shabeer Sheffa

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>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.multiBarChart();
    chart.color(d3.scale.category10().range());
    chart.xAxis.tickFormat(d3.format(',.2f'));
    chart.yAxis.tickFormat(d3.format(',.2f'));
    chart.tooltipContent(function (key, y, e, graph) {
        var x = String(graph.point.x);
        var y = String(graph.point.y);
        if (key == 'Count') {
            var y = String(graph.point.y) + ' call';
        }
        if (key == 'Duration') {
            var y = String(graph.point.y) + ' min';
        }
        tooltip_str = '<center><b>' + key + '</b></center>' + y + ' at ' + x;
        return tooltip_str;
    });
    d3.select('#multiBarChart svg')
        .datum(data_multiBarChart)
        .transition().duration(500)
        .attr('height', 350)
        .call(chart);

    return chart;
});
data_multiBarChart = [{
    'values': [{
        'y': 0,
            'x': 1
    }, {
        'y': 8,
            'x': 2
    }],
        'key': 'Count',
        'yAxis': '1'
}, {
    'values': [{
        'y': 12,
            'x': 1
    }, {
        'y': 8,
            'x': 2
    }],
        'key': 'Duration',
        'yAxis': '1'
}];