JSFiddle - React, Tailwind, and code Playground

by ct101

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>

<div id="chartContainer" style="height: 400px; width: 100%;"></div>

JavaScript

var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
var stockChart = new CanvasJS.StockChart("chartContainer",{
  theme: "light2",
  charts: [{
    toolTip: {
      shared: true
    },
    axisX: {
      lineThickness: 0,
      tickLength: 0,
      labelFormatter: function(e) {
        return "";
      }
    },
    axisY: {
      prefix: "$"
    },
    legend: {
      verticalAlign: "top"
    },
    data: [{
      showInLegend: true,
      name: "Minute Chart",
      type: "candlestick",
      dataPoints : dataPoints1
    }]
  },{
    height: 100,
    toolTip: {
      shared: true
    },
    legend: {
      verticalAlign: "top"
    },
    
    axisX: {
      lineThickness: 0,
      tickLength: 0,
      labelFormatter: function(e) {
        return e.value;
      }
    },    
    data: [{
      showInLegend: true,
      name: "Volume",
      dataPoints : dataPoints2
    }]
  }],
  rangeSelector: {
  	enabled: false
  },
  navigator: {
    axisX: {
      lineThickness: 0,
      tickLength: 0,
      labelFormatter: function(e) {
        return e.value;
      }
    },
    data: [{
      dataPoints: dataPoints3
    }]
  }
});
$.getJSON("https://canvasjsdojowebfunction.s3.us-west-1.amazonaws.com/amc2.json", function(data) {
  for(var i = 0; i < data["results"].length; i++){
    dataPoints1.push({label: new Date(data["results"][i].t), y: [Number(data["results"][i].o), Number(data["results"][i].h), Number(data["results"][i].l), Number(data["results"][i].c)]});
    dataPoints2.push({label: new Date(data["results"][i].t), y: Number(data["results"][i].v)});
    dataPoints3.push({label: new Date(data["results"][i].t), y: Number(data["results"][i].c)});
  }
  stockChart.render();
});