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", {
	axisX2: {
  	title: "Frequency in Hertz (Hz)",
  	logarithmic: true    
  },
  axisY: {
  	title: "Hearing Level in dB",
  	reversed: true
  },
  legend: {
  	fontSize: 16
  },
  data: [{
      type: "line",
      showInLegend: true,
      legendText: "Right Ear",
      legendMarkerColor: "#4f81bc",      
      markerColor: "white",
      markerSize: 15,
      markerBorderThickness: 2,
      markerBorderColor: "#4f81bc",      
      indexLabelFontSize: 16,
      indexLabelFontWeight: "bold",
      axisXType: "secondary",
      dataPoints: [
        { x: 250, y: 20 },
        { x: 500, y: 25, indexLabel: "[" },
        { x: 1000, y: 40 },
        { x: 2000, y: 55, indexLabel: "["  },
        { x: 3000, y: 80 },
        { x: 4000, y: 80 },
        { x: 5000, y: 85 },
        { x: 8000, y: 90 }
      ]
    },{
      type: "line",
      showInLegend: true,
      legendText: "Left Ear",
      markerType: "cross",
      markerColor: "#c0504e",
      markerSize: 15,
      indexLabelFontSize: 16,
      indexLabelFontWeight: "bold",
      axisXType: "secondary",
      dataPoints: [
        { x: 250, y: 10 },
        { x: 500, y: 12 },
        { x: 1000, y: 28, indexLabel: ">" },
        { x: 2000, y: 39 },
        { x: 3000, y: 68 },
        { x: 4000, y: 75 },
        { x: 5000, y: 70, indexLabel: ">" },
        { x: 8000, y: 80 }
      ]
    }					
  ]
});

chart.render();