JSFiddle - React, Tailwind, and code Playground

by tramtom

HTML

<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<div id='chart'>
  <svg style='height:500px'> </svg>
</div>

JavaScript

nv.addGraph(function() {
  var chart = nv.models.lineChart()
                .margin({left: 100})  
                .useInteractiveGuideline(true)  
                .transitionDuration(350)  
                .showLegend(true)       
                .showYAxis(true)        
                .showXAxis(true)  
  ;

  chart.xAxis     
      .axisLabel('Time')
      .tickFormat(d3.format(',r'));

  chart.yAxis     
      .axisLabel('Score')
      .tickFormat(d3.format('.02f'));


  var myData = data();   

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

  //Update the chart when window resizes.
  nv.utils.windowResize(function() { chart.update() });
  return chart;
});
/**************************************
 * Simple test data generator
 */
function data() {
  var serieA = [],serieB = [],
      serieC = [];

  
  for (var i = 0; i < 50; i++) {
      serieA.push({x: i, y: 100});
      serieB.push({x: i, y: 200});
      serieC.push({x: i, y: 400});
  }
    
    
  for (var i = 50; i < 100; i++) {
      serieA.push({x: i, y: 120});
      serieB.push({x: i, y: 205});
      serieC.push({x: i, y: 390});
  }
    
  for (var i = 100; i < 120; i++) {
      serieA.push({x: i, y: 120});
      serieB.push({x: i, y: 215});
      serieC.push({x: i, y: 390});
  }


  
  return [
    {
      values: serieA,      
      key: 'Serie A',
      color: '#ff7f0e'  
    },
    {
      values: serieB,
      key: 'Serie B',
      color: '#2ca02c'
    },
    {
      values: serieC,
      key: 'Serie C',
      color: '#7777ff'
    }
  ];
}