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", {
	theme: "light2",
  title:{
    text: "Weighted Score"
  },
  axisY: {
  	maximum: 50,
    minimum: -50
  },
  data: [{				
    dataPoints: [
      { label: "Combined Score", y: 1 },
      { label: "Physics Score", y: 5 },
      { label: "Clinical Score", y: 7 }
    ]
  },
  {				
    dataPoints: [
      { label: "Combined Score", y: -4 },
      { label: "Physics Score", y: -5 },
      { label: "Clinical Score", y: 4 }
    ]
  },
  {
		type: "ohlc",    
		dataPoints: [
		{ label: "Combined Score", y: [-20, 20, -20, 20] },
		{ label: "Physics Score", y: [-30, 30, -30, 30] },
		{ label: "Clinical Score", y: [-15, 15, -15, 15] }
		]
	}]
});

chart.render();