JSFiddle - React, Tailwind, and code Playground

by gschutz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.css">
<div id="chart">
  <svg height="600"></svg>
</div>

JavaScript

nv.addGraph(function() {
  var chart = nv.models.lineWithFocusChart()
              .x(function (d) { return d[0]; })
              .y(function (d) { return d[1]; })
  
  var parseDate = d3.time.format.multi([
    ["%B", function(d) { return d.getMonth(); }],
    ["%Y", function() { return true; }]
  ]);  
  chart.height(500);

  chart.xAxis
      .tickFormat(function(d){return parseDate(new Date(d));});
  chart.x2Axis
      .tickFormat(function(d){return parseDate(new Date(d));});

  chart.yAxis
      .tickFormat(d3.format(',.2f'));

  chart.y2Axis
      .tickFormat(d3.format(',.2f'));

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

  nv.utils.windowResize(chart.update);

  return chart;
});
/**************************************
 * Simple test data generator
 */

function rand(n) {
	return [d3.range(1,n+1).map(function(d){
  	//return {x: d, y: Math.pow(Math.random(), 2) * d};
    var dt = new Date()
    dt.setMonth(d)
    
    return [dt, Math.pow(Math.random(), 2) * d];
  })]; 
}

function testData() {
  return rand(1000).map(function(data, i) {
    return { 
      key: 'Stream' + i,
      values: data
    };
  });
}