JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.js"></script>
<div class='chart full' id='chart1'><svg></svg></div>
<label for="update">Volatility: </label><input type="number" name="volatility" id="volatility" />

CSS

/********************
 * HTML CSS
 */


.chartWrap {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/********************
  Box shadow and border radius styling
*/
.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

/********************
 * TOOLTIP CSS
 */

.nvtooltip {
  position: absolute;
  background-color: rgba(255,255,255,1.0);
  padding: 1px;
  border: 1px solid rgba(0,0,0,.2);
  z-index: 10000;

  font-family: Arial;
  font-size: 13px;
  text-align: left;
  pointer-events: none;

  white-space: nowrap;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*Give tooltips that old fade in transition by
    putting a "with-transitions" class on the container div.
*/
.nvtooltip.with-transitions, .with-transitions .nvtooltip {
  transition: opacity 250ms linear;
  -moz-transition: opacity 250ms linear;
  -webkit-transition: opacity 250ms linear;

  transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -webkit-transition-delay: 250ms;
}

.nvtooltip.x-nvtooltip,
.nvtooltip.y-nvtooltip {
  padding: 8px;
}

.nvtooltip h3 {
  margin: 0;
  padding: 4px 14px;
  line-height: 18px;
  font-weight: normal;
  background-color: rgba(247,247,247,0.75);
  text-align: center;

  border-bottom: 1px solid #ebebeb;

  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.nvtooltip p {
  margin: 0;
  padding: 5px 14px;
  text-align: center;
}

.nvtooltip span {
  display: inline-block;
  margin: 2px 0;
}

.nvtooltip table {
  margin: 6px;
  border-spacing:0;
}


.nvtooltip table td {
  padding: 2px 9px 2px 0;
  vertical-align: middle;
}

.nvtooltip table td.key {
 ...

JavaScript

var histcatexpshort = [{
"key": "Default",
"values": [[1356912000000,0],[1357516800000,0],[1358121600000,0],[1358726400000,0],[1359331200000,0],[1359936000000,0],[1360540800000,0],[1361145600000,0],[1361750400000,100],[1362355200000,0],[1362960000000,0],[1363564800000,0],[1364169600000,0],[1364774400000,0],[1365379200000,0],[1365984000000,0],[1366588800000,0],[1367193600000,0],[1367798400000,0],[1368403200000,0],[1369008000000,0],[1369612800000,0],[1370217600000,0],[1370822400000,0],[1371427200000,0],[1372032000000,0],[1372636800000,0],[1373241600000,0],[1373846400000,0],[1374451200000,0],[1375056000000,0],[1375660800000,0],[1376265600000,0],[1376870400000,275],[1377475200000,0],[1378080000000,0],[1378684800000,0],[1379289600000,0],[1379894400000,0],[1380499200000,0],[1381104000000,0],[1381708800000,0],[1382313600000,0],[1382918400000,0],[1383523200000,0],[1384128000000,0],[1384732800000,0],[1385337600000,0],[1385942400000,0],[1386547200000,0],[1387152000000,0],[1387756800000,0],[1388361600000,0]]
},
{
"key": "PAR: 279",
"values":...