JSFiddle - React, Tailwind, and code Playground

by askhflajsf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<script src="https://rawgit.com/chartjs/Chart.js/master/samples/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-zoom/master/chartjs-plugin-zoom.min.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<h1>How to make the lines and bars in this Chart.js <a href="https://github.com/chartjs/Chart.js/blob/master/samples/scales/time/combo-time-scale.html">combo time scale</a>:</h1>
<div style="width: 100%;">
  <canvas id="canvas" height="100"></canvas>
</div>
<p></p>
<h1>More like the ones at <a href="http://bitcoinity.org/markets">Bitcoinity</a>?</h1>
<img src="https://evilsocket.net/images/2016/05/bitcoinity.png" style="width: 100%;">
<img src="https://evilsocket.net/images/2016/05/bitcoinity.png">

CSS

canvas {
  background: #fff;
}

JavaScript

/*var trades = [{"tid": 170899, "date": 1363068488, "amount": "6.31490000", "price": "34.20"}, {"tid": 170906, "date": 1363076575, "amount": "1.01910000", "price": "36.31"}, {"tid": 170910, "date": 1363082511, "amount": "3.76470000", "price": "33.47"}, {"tid": 170911, "date": 1363083558, "amount": "2.91530000", "price": "39.22"}, {"tid": 170953, "date": 1363201953, "amount": "1.99980000", "price": "38.81"}, {"tid": 170974, "date": 1363167980, "amount": "1.00010000", "price": "37.78"}, {"tid": 171012, "date": 1363174254, "amount": "2.72480000", "price": "36.70"}, {"tid": 171019, "date": 1363265767, "amount": "15.00170000", "price": "38.30"}, {"tid": 171037, "date": 1363377405, "amount": "1.50170000", "price": "40.10"}, {"tid": 171042, "date": 1363267817, "amount": "4.59970000", "price": "37.24"}, {"tid": 171049, "date": 1363259874, "amount": "0.99890000", "price": "37.79"}, {"tid": 171053, "date": 1363206942, "amount": "0.09310000", "price": "42.95"}, {"tid": 171083, "date": 1363614578, "amount": "5.18490000", "price": "38.57"}, {"tid": 171115, "date": 1363609004, "amount": "1.06010000", "price": "38.93"}, {"tid": 171145, "date": 1363641954, "amount": "5.00010000", "price": "38.93"}, {"tid": 171156, "date": 1363347966, "amount": "2.03950000", "price": "39.23"}, {"tid": 171182, "date": 1363366710, "amount": "1.99230000", "price": "39.96"}, {"tid": 171190, "date": 1363373076, "amount": "1.16140000", "price": "38.75"}, {"tid": 171227, "date": 1363691519, "amount": "1.00000000", "price": "37.39"}, {"tid": 171232, "date": 1363458947, "amount": "0.99480000", "price": "41.53"}, {"tid": 171276, "date": 1363696099, "amount": "0.53170000", "price": "37.61"}, {"tid": 171281, "date": 1363681420, "amount": "1.00430000", "price": "38.34"}, {"tid": 171308, "date": 1363599160, "amount": "0.99990000", "price": "39.51"}, {"tid": 171315, "date": 1363585707, "amount": "2.60840000", "price": "38.34"}, {"tid": 171330, "date": 1363601766, "amount": "0.50490000", "price": "39.61"},...