JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/quicktests/exampleUtil.js"></script>
<svg id="chart" width="400" height="300"></svg>

CSS

</style> <link rel="stylesheet" type="text/css" href="https://rawgithub.com/palantir/plottable/develop/plottable.css"> <style type="text/css">
/*-- Add custom styles after this line --*/
body { background-color: #AAA; }
svg { background-color: #FFF; }

JavaScript

xScale = new Plottable.Scales.Time();
yScale = new Plottable.Scales.Linear();

xAxis = new Plottable.Axes.Time(xScale, "bottom");
plot = new Plottable.Plots.Line();
plot.x(function(d) { return d.x }, xScale);
plot.y(function(d) { return d.y }, yScale);
plot.attr("stroke", function(d, i, ds){
  return ds.metadata().color;    
});

var data = Array.apply(null, Array(3000)).map(function(d, i) {
  return {
    x: new Date(i * 100),
    y: i * Math.random()
  }
});
var data2 = Array.apply(null, Array(3000)).map(function(d, i) {
  return {
    x: new Date(i * 100),
    y: 2 * i * Math.random() * Math.random()
  }
});
plot.addDataset(new Plottable.Dataset(data, {color: "#ff0000"}));
plot.addDataset(new Plottable.Dataset(data2, {color: "#0000ff"}));

plot.downsamplingEnabled(true);

var table = new Plottable.Components.Table([
  [plot],
  [xAxis]
]);

(new Plottable.Interactions.PanZoom(xScale, null)).attachTo(plot);


table.renderTo("#chart");