JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class = "container">
  <div id="chart2" style="clear">
    <svg></svg>
  </div>

  <div id="chart1" style="clear">
    <svg></svg>
  </div>
</div>

JavaScript

var width = 500,
  height = 250;

nv.addGraph(function() {

  var chart;
  chart = nv.models.lineChart()
  .x(function(d) {
    return d.x;
  })
  
  .width(width).height(height);

  chart.xAxis.tickFormat(function(d) {
  console.log(d);
    return d3.time.format("%b-%y")(new Date(d));
  });

  chart.yAxis.tickFormat(d3.format(',g'));
  
  d3.select('#chart2 svg').datum(data)
    //  .transition().duration(500)
    .call(chart
    .showLegend(false)
    .showXAxis(false) 
    .y(function(d) {
    return d.y * 200;
  }))
    .attr('width', width)
    .attr('height', height);
    
      d3.select('#chart1 svg').datum(data)
    //  .transition().duration(500)
    .call(chart.showLegend(false).showXAxis(true)
    .y(function(d) {    return 20 * d.y;  }))
    .attr('width', width)
    .attr('height', height);

  nv.utils.windowResize(chart.update);
  
  chart.dispatch.on('stateChange', function(e) {
    nv.log('New State:', JSON.stringify(e));
  });

  return chart;
});



data = [{
  "values": [{
    "x": 1025409600000,
    "y": 0
  }, {
    "x": 1028088000000,
    "y": 0.09983341664682815
  }, {
    "x": 1030766400000,
    "y": 0.19866933079506122
  }, {
    "x": 1033358400000,
    "y": 0.29552020666133955
  }, {
    "x": 1036040400000,
    "y": 0.3894183423086505
  }],
  "key": "Line 1",
  "color": "#ff7f0e"
}]