JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<table id="tableId">
  <tr>
    <th>Beach Name</th>
    <th>Volume</th>
  </tr>
</table>

CSS

th, td {
  border: 1px solid black;
}

JavaScript

var noOfRows = 0;

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,    
  theme: "dark2", // “light1”, “light2”, “dark1”, “dark2”
  title: {
    text: "Binance Volume Analyser"
  },
  legend: {
    cursor: "pointer",
    dockInsidePlotArea: true,
  },
  toolTip: {
    shared: true,
    contentFormatter: function(e) {
      showTableData(e);
      var content = CanvasJS.formatDate(e.entries[0].dataPoint.x, "MMM DD YYYY") + "<br/>";
      for(var i = 0; i < e.entries.length; i++) {      
      	content += ("<span style='color: " + e.entries[i].dataSeries.color  + "'>"+ e.entries[i].dataSeries.name + "</span>: " + e.entries[i].dataPoint.y + "<br/>")
      }
      return content;
    }
  },
  data: [{
    name: "Myrtle Beach",
    type: "spline",
    yValueFormatString: "#0.## °C",
    showInLegend: true,
    dataPoints: [
      { x: new Date(2017, 6, 24), y: 25 },
      { x: new Date(2017, 6, 25), y: 29 },
      { x: new Date(2017, 6, 26), y: 31 },
      { x: new Date(2017, 6, 27), y: 29 },
      { x: new Date(2017, 6, 28), y: 26 },
      { x: new Date(2017, 6, 29), y: 22 },
      { x: new Date(2017, 6, 30), y: 29 }
    ]
  }, {
    name: "Martha Vineyard",
    type: "spline",
    yValueFormatString: "#0.## °C",
    showInLegend: true,
    dataPoints: [
      { x: new Date(2017, 6, 24), y: 50 },
      { x: new Date(2017, 6, 25), y: 40 },
      { x: new Date(2017, 6, 26), y: 45 },
      { x: new Date(2017, 6, 27), y: 48 },
      { x: new Date(2017, 6, 28), y: 43 },
      { x: new Date(2017, 6, 29), y: 28 },
      { x: new Date(2017, 6, 30), y: 45 }
    ]
  }, {
    name: "Nantucket",
    type: "spline",
    yValueFormatString: "#0.## °C",
    showInLegend: true,
    dataPoints: [
      { x: new Date(2017, 6, 24), y: 45 },
      { x: new Date(2017, 6, 25), y: 50 },
      { x: new Date(2017, 6, 26), y: 40 },
      { x: new Date(2017, 6, 27), y: 45 },
      { x: new Date(2017, 6, 28), y: 48 },
      { x: new Date(2017, 6, 29), y: 43 },
     ...