JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

window.onload = function () {

  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{
      text: "Google - Consolidated Quarterly Revenue",
      fontFamily: "arial black",
      fontColor: "#695A42"
    },
    axisX: {
      type: 'dateTime'
    },
    axisY:{
      valueFormatString:"$#0bn",
      gridColor: "#B6B1A8",
      tickColor: "#B6B1A8"
    },
    toolTip: {
      shared: true,
      content: toolTipContent
    },
    data: [
      {
        "type": "line",
        "lineThickness": 1,
        "lineDashType": "solid",
        "markerType": "circle",
        "xValueType": "dateTime",
        "dataPoints": [
          {
            "x": 1583301600001,
            "y": 123
          },
          {
            "x": 1583906400000,
            "y": 354
          },
          {
            "x": 1583906399999,
            "y": 100
          },
          {
            "x": 1583906399998,
            "y": 200
          }
        ],
        "trueType": "column"
      }
    ]
  });
  chart.render();

  function toolTipContent(e) {
    var str = "";
    var total = 0;
    var str2, str3;
    for (var i = 0; i < e.entries.length; i++){
      var  str1 = "<span style= \"color:"+e.entries[i].dataSeries.color + "\"> "+e.entries[i].dataSeries.name+"</span>: $<strong>"+e.entries[i].dataPoint.y+"</strong>bn<br/>";
      total = e.entries[i].dataPoint.y + total;
      str = str.concat(str1);
    }
    str2 = "<span style = \"color:DodgerBlue;\"><strong>"+(e.entries[0].dataPoint.x).getFullYear()+"</strong></span><br/>";
    total = Math.round(total * 100) / 100;
    str3 = "<span style = \"color:Tomato\">Total:</span><strong> $"+total+"</strong>bn<br/>";
    return (str2.concat(str)).concat(str3);
  }

}