JSFiddle - React, Tailwind, and code Playground

by jsling

HTML

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

<div id="stockChartContainer" style="height: 450px; width: 100%;"></div>

JavaScript

window.onload = function () {
  var dataPoints = [];
  var stockChart = new CanvasJS.StockChart("stockChartContainer",{
    title:{
      text:"Ethereum Closing Price"
    },
    charts: [{
      axisX: {
        crosshair: {
          enabled: true,
          snapToDataPoint: true
        }
      },
      axisY: {
        prefix: "$",
        crosshair: {
          enabled: true,
          snapToDataPoint: true,
          valueFormatString: "$#,###.##"
        }
      },
      data: [
        {
          type: "line",
          name: "Price",
          yValueFormatString: "$#,###.##",
          dataPoints : dataPoints
        },
        {
          type: "scatter",
          color: "red",
          markerSize: 25,
          markerColor: "transparent",
          markerBorderColor: "red",
          markerBorderThickness: 1,
          highlightEnabled: false,
          indexLabel: "ℹ️",
          indexLabelFontSize: 15,
          indexLabelFontColor: "red",
          dataPoints: [
            {x: new Date(2018, 03, 07), y: 400, toolTipContent: "Custom Info"},
            {x: new Date(2018, 04, 20), y: 750, toolTipContent: "Custom Info"},
            {x: new Date(2018, 05, 28), y: 500, toolTipContent: "Custom Info"},
            {x: new Date(2018, 07, 15), y: 350, toolTipContent: "Custom Info"},
            {x: new Date(2018, 08, 12), y: 250, toolTipContent: "Custom Info"},
          ]
        }
      ]
    }],
    navigator: {
      slider: {
        minimum: new Date(2018, 02, 01),
        maximum: new Date(2018, 10, 01)
      },
      data: [{
        type: "area",
        color: "#91BCF0",
        dataPoints : dataPoints
      }],
    }
  });
  $.getJSON("https://canvasjs.com/data/docs/ethusd2018.json", function(data) {
    for(var i = 0; i < data.length; i++){
      dataPoints.push({x: new Date(data[i].date), y: Number(data[i].close)});
    }
    stockChart.render();
  });
}