JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 100px; width: 100%; position: relative;"></div>
<div id="chartContainer2" style="height: 100px; width: 100%; position: relative;"></div>
<div id="chartContainer3" style="height: 100px; width: 100%; position: relative;"></div> 
<div id="chartContainer4" style="height: 100px; width: 100%; position: relative;"></div>

JavaScript

var axisX = {
  lineThickness: 0,
  gridThickness: 0,
  tickThickness: 0,
  labelFormatter: function(e) {
    return " ";
  }
},
    legend = {
      horizontalAlign: "left",
      verticalAlign: "center"
    },
    charts = [];
var chart1 = new CanvasJS.Chart("chartContainer1", {
  legend: legend,
  axisY: {
    gridThickness: 0
  },
  axisX: axisX,
  data: [              
    {			
      type: "line",
      showInLegend: true,
      legendText: "Height",
      legendMarkerType: "none",
      dataPoints: [
        { x: 10, y: 70 },
        { x: 20, y: 20 },
        { x: 30, y: 50 },
        { x: 40, y: 40 },
        { x: 50, y: 30 },
        { x: 60, y: 25 },
        { x: 70, y: 50 },
        { x: 80, y: 22 },
        { x: 90, y: 16 }
      ]
    }
  ]
});

chart1.render();

var chart2 = new CanvasJS.Chart("chartContainer2", {
  legend: legend,
  axisY: {
    gridThickness: 0
  },
  axisX: axisX,
  data: [              
    {			
      type: "line",
      showInLegend: true,
      legendText: "width",      
      legendMarkerType: "none",
      dataPoints: [
        { x: 10, y: 51 },
        { x: 20, y: 35 },
        { x: 30, y: 50 },
        { x: 40, y: 25 },
        { x: 50, y: 65 },
        { x: 60, y: 48 },
        { x: 70, y: 18 },
        { x: 80, y: 24 },
        { x: 90, y: 14 }
      ]
    }
  ]
});

chart2.render();

var chart3 = new CanvasJS.Chart("chartContainer3", {
  legend: legend,
  axisY: {
    gridThickness: 0
  },
  axisX: axisX,
  data: [              
    {			
      type: "line",
      showInLegend: true,
      legendText: "Systolic",
      legendMarkerType: "none",
      dataPoints: [
        { x: 10, y: 31 },
        { x: 20, y: 55 },
        { x: 30, y: 40 },
        { x: 40, y: 55 },
        { x: 50, y: 15 },
        { x: 60, y: 48 },
        { x: 70, y: 58 },
        { x: 80, y: 24 },
        { x: 90, y: 34 }
      ]
    }
  ]
});

chart3.render();

var chart4 = new CanvasJS.Chart("chartContainer4", {
  legend: legend,
  axisY: {
   ...