JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<h1 style="text-align: center;">Audiogram</h1>
<div style="height: 400px; width: 1300px; margin: 0px auto;padding: 5px;">

  <div id="chartContainer" style="background-color; height: 400px; width: 600px;float: left;"></div>  

  <div id="chartContainer1" style="background-color; height: 400px;width: 600px;float: right;"></div>
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  backgroundColor: "",
  title: {
    text: "RIGHT EAR"
  },
  axisX: {
    title: "Frequency (Hz)"
  },
  axisY: {
    title: "Hearing Lavel (dBHL)",
    reversed:true
  },
  axisY2:{
    title: "axisY2 Title",

  },
  data: [{
    type: "line",
    lineDashType: "dot",
    color:"red",
    markerType: "null",
    dataPoints: [{"y":"","label":125,"0":""},{"y":55,"label":250,"markerImageUrl":"https:\/\/soundoflife.in\/audiology\/images\/less-than.png"},{"y":65,"label":500,"markerImageUrl":"https:\/\/soundoflife.in\/audiology\/images\/less-than.png"},{"y":73,"label":1000,"markerImageUrl":"https:\/\/soundoflife.in\/audiology\/images\/less-than.png"},{"y":75,"label":2000,"markerImageUrl":"https:\/\/soundoflife.in\/audiology\/images\/less-than.png"},{"y":75,"label":4000,"markerImageUrl":"https:\/\/soundoflife.in\/audiology\/images\/less-than.png"},{"y":85,"label":8000,"markerImageUrl":"https:\/\/soundoflife.in\/audiology\/images\/less-than.png"}]
  }, {
    type: "line",
    color:"red",
    markerType: "circle",
    markerSize:10,
    showInLegend: false,
    dataPoints: [{"y":"","label":125},{"y":90,"label":250},{"y":105,"label":500},{"y":95,"label":1000},{"y":95,"label":2000},{"y":103,"label":4000},{"y":107,"label":8000}]
  },{
    axisYType: "secondary",
    showInLegend: false,
    dataPoints:[]
  }]
});


var chart1 = new CanvasJS.Chart("chartContainer1", {
  backgroundColor: "",
  title: {
    text: "LEFT EAR"
  },
  axisX: {
    title: "Frequency (Hz)"
  },
  axisY: {
    title: "Hearing Lavel (dBHL)",
    reversed: true
  },
  axisY2:{
    title: "axisY2 Title"
  },
  data: [
    {
      markerType: "cross",  //"circle", "square", "cross", "none"
      markerSize:10,
      type: "line",
      color:"blue",
      showInLegend: false,
      dataPoints: [{"y":"","label":125},{"y":80,"label":250},{"y":105,"label":500},{"y":95,"label":1000},{"y":95,"label":2000},{"y":103,"label":4000},{"y":107,"label":8000}]     ...