JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>
<svg></svg>

Babel + JSX

var data = [
	{
    	"key": "months",
    	"values": [
            { "value": 1, "label": "Jan" },
            { "value": 3, "label": "Feb" },
            { "value": 5, "label": "Mar" },
            { "value": 2, "label": "Apr" },
            { "value": 4, "label": "May" },
            { "value": 6, "label": "Jun" },
            { "value": 10, "label": "Jul" }
        ]
    }
];

nv.addGraph( () => {
    var barChart = nv
    	.models
        .discreteBarChart()
            .x( ( data ) => data.label )
            .y( ( data ) => data.value )
            .staggerLabels( true )
            .showValues( true )
            .duration( 250 );

    d3
    	.select( "svg" )
        .datum( data )
        .call( barChart );

    nv.utils.windowResize( barChart.update );
    
    return barChart;
} );