JSFiddle - React, Tailwind, and code Playground

by R

HTML

<canvas id="container"></canvas>

<!-- javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

CSS

#container {
  width: 100%;
  max-width: 100%;
}

JavaScript

$(function() {
 
  $.getJSON("http://chartapi.finance.yahoo.com/instrument/1.1/goog/chartdata;type=close;range=6m/json/?callback=?", function(data) {
    var labelsData = [];
    var chartData = [];
 
    $.each(data.series, function(i, value) {
      // Chart.js expects the date in free format, so I want to prepare date's format like YYYY-MM-DD.
      var date = data.series[i].Date.toString(),
        year = date.substring(0, 4),
        month = date.substring(4, 6),
        day = date.substring(6, 8),
        chartTime = year + '/' + month + '/' + day,
        chartClose = data.series[i].close;
 
      labelsData.push(chartTime);
      chartData.push(chartClose);
    });
 
 
    // Create the chart.
    var ctx = $("#container");
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labelsData,
        datasets: [{
          label: '# of Series',
          data: chartData,
        }]
      }
    });
 
  });
});