JSFiddle - React, Tailwind, and code Playground

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://cdnjs.cloudflare.com/ajax/libs/d3-dsv/1.0.3/d3-dsv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.4/numeral.min.js"></script>
<h1>How to make this <a href="http://www.chartjs.org/">Chart.js</a> chart:</h1>
<canvas id="canvas"></canvas>
<br>
<h1>Like <a href="https://coin.dance/volume/localbitcoins/USD">https://coin.dance/volume/localbitcoins/USD</a>?</h1>
<img src="https://s8.postimg.org/pl3j9ikt1/coin-dance-localbitcoins-_EUR-volume.jpg" style="width: 100%;">

CSS

canvas {
  display: block;
  background: #fff;
  width: 100%;
}

JavaScript

$(function() {


 // http://localbitcoins.com/bitcoincharts/usd/trades.json
 
 /* The returned JSON looks like this:
 
 [
  {
    "tid": 170899,
    "date": 1363068488,
    "amount": "6.31490000",
    "price": "34.20"
  },
  {
    "tid": 170906,
    "date": 1363076575,
    "amount": "1.01910000",
    "price": "36.31"
  },
  */
  
  var trades = $.getJSON("https://cors-anywhere.herokuapp.com/localbitcoins.com/bitcoincharts/usd/trades.json");


// WHERE TO TAKE IT FROM HERE???????????


  var priceDataQuery = $.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fdata.bitcoinity.org%2Fexport_data.csv%3Fcurrency%3DUSD%26data_type%3Dprice%26exchange%3Dbitfinex%26r%3Dhour%26t%3Dl%26timespan%3D7d'%20and%20columns%3D'Time%2Cavg%2Cmax%2Cmin'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys");
  var volumeDataQuery = $.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fdata.bitcoinity.org%2Fexport_data.csv%3Fcurrency%3DUSD%26data_type%3Dprice_volume%26exchange%3Dbitfinex%26t%3Dlb%26timespan%3D7d%26vu%3Dcurr'%20and%20columns%3D'Time%2Cprice%2Cvolume'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys");
  
  // This JSON looks like: {"query":{"count":168,"created":"2017-05-29T21:40:36Z","lang":"nb","results":{"row":[{"Time":"Time","avg":"avg","max":"max","min":"min"},{"Time":"2017-05-22 22:00:00 UTC","avg":"2073.86807835654","max":"2141.6","min":"1982.0"} ...
  
  
  $.when(priceDataQuery, volumeDataQuery).done(function(priceData, volumeData) {
    priceData[0].query.results.row.shift(); // remove column names row
    volumeData[0].query.results.row.shift(); // remove column names row
    var config = getConfig(priceData[0].query.results.row, volumeData[0].query.results.row);
    var ctx = document.getElementById("canvas").getContext("2d");
    var myChart = new Chart(ctx, config);
  });
});

function getConfig(priceData, volumeData)...