JSFiddle - React, Tailwind, and code Playground

by Ravinder Bhardwaj

HTML

<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<script src="https://cdn.rawgit.com/liquidpele/nvd3/development/build/nv.d3.min.js"></script>
<div id="multiChart"><svg></svg></div>

CSS

.tick line {
    display: none;
}
div#multichart{
    height:400px
}
svg{
    height:400px
}

JavaScript

nv.addGraph(function() {
        var chart = nv.models.multiChart();
    	chart
            .height(400)
        chart.margin({"left":70,"right":60,"top":30,"bottom":50})
        chart.yAxis1
        	.axisLabel('Y1 Axis')
            .tickFormat(function (d) {
                    return d3.format(',f')(d);
                })
        chart.yAxis2
        	.axisLabel('Y2 Axis')
            .tickFormat(function (d) {
                    return '$' + d3.format(',.2f')(d)
                })
        chart.xAxis
        	.axisLabel('X Axis')
            .tickFormat(function (d) {
                    if (d > 0) {
                        return d3.time.format('%x')(new Date(d))
                    }
                    return null;
                })
        chart.tooltip
            .enabled(true)
            .contentGenerator(function(d,i){
            	var str = "<table><thead><tr><th colspan='2'>";
            	if(d.value){
                    str += d3.time.format('%x')(new Date(d.value));
                } else {
                    str += '';
                }
            	str +=	"</th></tr></thead><tbody>";
            	if (d.data){
                str += "<tr><td>"+ d.data && d.data.key ? d.data.key : "" +"</td>";
            	str += "<td> $"+ d.data && d.data.y ? d3.format(',f')(d.data.y): "" +"</td></tr>" ;
                }
            	if (d.point) {    
                    console.log(d)
            	str += "<tr><td>"+d.point && d.point.series ? d.point.series : "" +"</td>";
            	str += "<td> $" + d.point && d.point.y ? d3.format(',.2f')(d.point.y) : "" +"</td></tr>";
                }
            	str +=  "</tbody></table>";
            	return str;
        	})
        d3.select('#multiChart svg')
            .datum(dataChart)
            .transition().duration(200).call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });

var dataChart = [{
        "key": "Series 1",
        "type": "bar",
        "yAxis": 1,
       ...