JSFiddle - React, Tailwind, and code Playground

by cancanvas

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",
      showInLegend: true,
       legendText: "data series",
      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 }
      ]
    }
    ]
  });

chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>