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>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	axisX: {
  	crosshair: {
    	enabled: true,
      snapToDataPoint: true,
      valueFormatString: "#,###.##"
    }
  },
  data: [
    {
      type: "spline",
			xValueFormatString: "#,###.##",
      dataPoints:[
        {"x" : 5, "y" : 100.5},
        {"x" : 5.5, "y" : 103.2},
        {"x" : 6, "y" :106.0},
        {"x" : 6.5, "y" : 108.7},
        {"x" : 7, "y" : 111.4},
        {"x" : 7.11, "y" : 114.1},
        {"x" : 8, "y" : 116.8},
        {"x" : 8.5,"y" : 119.6},
        {"x" : 9, "y" : 122.4},
        {"x" : 9.5, "y" : 125.2},
        {"x" : 10, "y" :128.1},
        {"x" : 10.5, "y" : 130.9},
        {"x" : 11, "y" : 133.7},
        {"x" : 11.5, "y" : 136.4},
        {"x" : 12, "y" : 138.9},
        {"x" : 12.5, "y" : 141.1},

        {"x" : 13, "y" : 142.9},
        {"x" : 13.5, "y" : 144.5},
        {"x" : 14, "y" : 145.8},
        {"x" : 14.5, "y" : 146.8},
        {"x" : 15, "y" : 147.5},

        {"x" : 15.5, "y" : 148.1},
        {"x" : 16, "y" : 148.6},
        {"x" : 16.5, "y" : 149.1},
        {"x" : 17, "y" : 149.5},

        {"x" : 17.5, "y" : 149.8},
        {"x" : 18, "y" : 150.2}
      ]
    }					
  ]
});

chart.render();