JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>

<head>  
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
    
      title:{
       text: "Share Value over a Year"   
     },
      theme: "theme2",
     axisX: {
       valueFormatString: "MMM"      
      },
      axisY:{
        valueFormatString: "#0$"
      },
     data: [
     {
      type: "line",
       markerType:"none",
       legendMarkerType: "triangle",
       legendMarkerColor: "#6B8E23",
       showInLegend: true,
       legendText: "Gain",
      dataPoints: [        
        { x: new Date(2012, 01, 1), y: 71, indexLabel: "gain", markerType: "triangle",  markerColor: "#6B8E23", markerSize: 12},
      { x: new Date(2012, 02, 1) , y: 55, indexLabel: "loss", markerType: "cross", markerColor: "tomato" , markerSize: 12  },
      { x: new Date(2012, 03, 1) , y: 50, indexLabel: "loss", markerType: "cross", markerColor: "tomato" , markerSize: 12 },
      { x: new Date(2012, 04, 1) , y: 65, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
      { x: new Date(2012, 05, 1) , y: 85, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
      { x: new Date(2012, 06, 1) , y: 68, indexLabel: "loss", markerType: "cross", markerColor: "tomato" , markerSize: 12 },
      { x: new Date(2012, 07, 1) , y: 28, indexLabel: "loss", markerType: "cross", markerColor: "tomato" , markerSize: 12 },
      { x: new Date(2012, 08, 1) , y: 34, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
      { x: new Date(2012, 09, 1) , y: 24, indexLabel: "loss", markerType: "cross", markerColor: "tomato" , markerSize: 12 }
      ]
    },
    {
     	legendText: "Loss",
      legendMarkerType: "cross",
      legendMarkerColor: "tomato",
      showInLegend: true,
      dataPoints: [{x: new Date(2012, 01, 1), y: null}]
     },
    ]
  });

chart.render();
}
</script>
<script...