JSFiddle - React, Tailwind, and code Playground

by Loxos

HTML

<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<script src="https://rawgit.com/masayuki0812/c3/dev/c3.js"></script>
<div class="container">
  <div class="content">
  <h1>
    C3JS
  </h1>
    <div class="grid grid-container-100">
      <div class="card">
        <div id="uniqueChart"></div>
      </div>
    </div>
    <div class="grid grid-container-33">
      <div class="card">
        <span>Current System Usage</span>
        <div id="currentSystemUsage">
          
        </div>
      </div>
    </div>
    <div class="grid grid-container-33">
      <div class="card">
        <span>Quick Check</span>
      </div>
    </div>
  </div>
</div>

CSS

body,
.container {
  background-color: lightgray;
}

.content {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.grid {
  margin: 30px;
  background-color: white;
  padding: 10px;
  min-height: 300px;
  float: left;
}

.grid-container-100 {
  width: 100%;
}

.grid-container-33 {
  width: 30%;
}

JavaScript

var dataset = [['x',1385856000000,1388534400000,1391212800000,1393632000000,1396310400000,1398902400000,1401580800000,1404172800000,1406851200000,1409529600000,1412121600000,1414800000000,1417392000000,1420070400000],["E : CHICAGO MERCANTILE EXCHANGE",1822078,64678,64601,64954,65895,64806,67250,64363,158653,93124,84229,83486,86207,84818],["E : EUREX LEVEL 1",1787884,2254840,1778993,272964,0,0,0,0,0,0,0,0,0,0],["E : OPTIONS PRICE REPORTING AUTHORITY",1526264,1791842,1874264,1928547,1574445,1629593,1621575,1805757,1599052,878941,987910,959511,1052275,1018787],["E : CHICAGO BOARD OF TRADE",709091,0,50263,49165,48589,0,0,0,0,0,0,0,0,0],["E : NYSE LIFFE EQUITY & INDEX DERIVATIVES LEVEL 1",303536,294130,278432,297866,246093,216558,0,0,0,0,0,0,0,0],["E : ITALIAN STOCK EXCHANGE LEVEL 1",243997,261612,259948,281369,259781,268116,292013,254130,214306,142066,152745,147551,152537,173459],["P : DS Realtime Mkt/Credit Risk App Server Perm",243357,265250,251868,267520,267735,260997,282512,268304,301959,275064,288582,330796,326241,299881],["E : BME SPANISH EXCHANGE DERIVATIVES LEVEL 1",205331,202797,204115,205982,145871,154430,163403,195180,189304,87288,89906,89794,113874,125126],["E : NASDAQ OMX NORDIC DERIVATIVES",111680,120791,121866,129011,113000,108396,112910,107872,134667,67173,69886,66477,74562,69683],["P : DS Realtime Inst Pricing Application Server Perm",78141,93835,80318,80094,81788,80948,240002,267645,266021,275352,286020,285005,293734,273420],["E : EURONEXT CASH BBO1",0,72261,0,0,0,0,0,0,0,0,0,0,0,0],["E : BME SPANISH EXCHANGE DERIVATIVES L1 L2",0,0,0,0,57414,0,64505,60165,56532,0,56028,58765,57106,0],["E : EURONEXT EQUITY & INDEX DERIVATIVES",0,0,0,0,0,157934,164273,157910,155082,100655,108002,105489,118194,139686],["E : ICE FUTURES EUROPE - FINANCIALS",0,0,0,0,0,102192,108028,104493,100397,86166,86504,122814,141163,288944],["P : Money 3000",0,0,0,0,0,0,0,0,0,75159,0,0,0,0],["E : CEF ULTRA EUREX LEVEL...