JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<center><h3>Move Mouse Over any Chart</h3></center>
<div id="chartContainer1" style="width: 49%; height: 275px;display: inline-block;"></div>
<div id="chartContainer2" style="width: 49%; height: 275px;display: inline-block;"></div>
<div id="chartContainer3" style="width: 49%; height: 275px;display: inline-block;"></div>
<div id="chartContainer4" style="width: 49%; height: 275px;display: inline-block;"></div>

JavaScript

var charts = [];
    
var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Chart 1"
  },
  toolTip: {
					shared: true
	},
 
  axisX: {
      crosshair: {
        enabled: true,
        snapToDataPoint: false,
     },
  },
  data: [{        
    type: "column",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { /* x: 30, y: 50 */ },
      { x: 40, y: 65 },
      { /* x: 50, y: 95 */ },
      { x: 60, y: 68 },
      { /* x: 70, y: 28 */ },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});

charts.push(chart1);

var chart2 = new CanvasJS.Chart("chartContainer2", {
  title: {
    text: "Chart 2"
  },
  toolTip: {
					shared: true
	},
  
  axisX: {
      crosshair: {
        enabled: true,
        snapToDataPoint: false,
      },
     },
  data: [{        
    type: "line",
    dataPoints: [
      { x: 10, y: 71 },
     
    
      { x: 60, y: 68 },
     
      { x: 90, y: 14 }
    ]
  }]
});

charts.push(chart2);

var chart3 = new CanvasJS.Chart("chartContainer3", {
  title: {
    text: "Chart 3"
  },
 toolTip: {
					shared: true
	},
  axisX: {
      crosshair: {
        enabled: true,
        snapToDataPoint: false
      },
     },
  data: [{        
    type: "bar",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14 }
    ]
  }]
});

charts.push(chart3);

var chart4 = new CanvasJS.Chart("chartContainer4", {
  title: {
    text: "Chart 4"
  },
  toolTip: {
					shared: true
	},
  	axisX: {
      crosshair: {
        enabled: true,
        snapToDataPoint: false,
      },
     },
  
  data: [{        
    type: "area",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 11, y: 65 },
      { x: 12, y: 40 },
      { x: 13, y: 35 },
      { x: 14, y: 60 },
      { x: 15, y: 10 },
      { x: 16, y: 65 },
      { x: 17, y: 40 },
     ...