JSFiddle - React, Tailwind, and code Playground

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: 450px; width: 100%;"></div>

JavaScript

var dps = [];
var stockChart = new CanvasJS.StockChart("chartContainer", {
  subtitles: [{
    text: "Select Range using Range Buttons and Inputfields"
  }],
  theme: "light2",
  exportEnabled: true,
  charts: [{
    axisY: {
      prefix: "$"
    },
    data: [{
      type: "line",
      dataPoints : dps,
      yValueFormatString: "$#,###.##"
    }],
  }],
  rangeSelector: {
    buttons: [
      {
        label: "250 Days",
        range: 250,
        rangeType: "day"
      },
      {
        label: "500 Days",
        range: 500,
        rangeType: "day"
      },
      {
        label: "750 Days",
        range: 750,
        rangeType: "day"
      },
      {
        label: "All",
        rangeType: "all"
      }
    ],
    selectedRangeButtonIndex: 0
  }
});

$.getJSON("https://api.npoint.io/306bf0a41ff44552a574", function(data) {
  for(var i = 0; i < data.length; i++){
    dps.push({x: new Date(data[i].date), y: Number(data[i].adjusted_close)});  
  }
  stockChart.render();
});