JSFiddle - React, Tailwind, and code Playground

by roadprophet

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.css">
<body>
    <div id="chart">
        <svg></svg>
    </div>
</body>

JavaScript

var data = [{
     key: 'Bars',
     values: [{
         label: '2005',
         value: 550
     }, {
         label: '2006',
         value: 600
     }, {
         label: '2007',
         value: '700'
     }, {
         label: '2008',
         value: 800
     }, {
         label: '2009',
         value: 900
     }, {
         label: '2010',
         value: 850
     }, {
         label: '2011',
         value: 880
     }, {
         label: '2012',
         value: 900
     }, {
         label: '2013',
         value: 1000
     }]
 }];

 nv.addGraph(function () {



     var chart = nv.models.discreteBarChart()
         .x(function (d) {
         return d.label
     }) //Specify the data accessors.
     .y(function (d) {
         return d.value
     })
         .staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
     .tooltips(false) //Don't show tooltips
     .showValues(true) //...instead, show the bar value right on top of each bar.
     .transitionDuration(350);

     d3.select('#chart svg')
         .datum(data)
         .call(chart);

     nv.utils.windowResize(chart.update);

     return chart;
 });