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"></div>

JavaScript

var width = 16; // this can vary
var depth = 60;  // this can vary

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2", 
	animationEnabled: true,
	zoomEnabled: true,
	title: {
	text: "Cross-Section Diagram",
                fontFamily: "arial",
                fontSize: 22
	},
  axisY: {
                title: "Depth along Y-Axis (in)",
                titleFontFamily: "arial",
                titleFontSize: 16,
                labelFontSize: 16,
								lineThickness: 1,
                gridThickness: 1,
                gridColor: "#E0FFFF"            
  },
  axisX: {
                title: "Width along X-Axis (in)",
                titleFontFamily: "arial",
                titleFontSize: 16,
                labelFontSize: 16,
                lineThickness: 1,
                gridThickness: 1,
                gridColor: "#E0FFFF"
  
  },
  
  data: [ {
  
    type: "area",
    color: "#d7edf9",
    lineThickness: 2,
    toolTipContent: "x: {x} in<br> y: {y} in",
    
      dataPoints: [
        { x: width/2, y: depth/2 },
        { x: -width/2, y: depth/2 },
        { x: -width/2, y: -depth/2 },
        { x: width/2, y:-depth/2 },
        { x: width/2, y: depth/2 }

      ]
    	}			
  ]
});

chart.render();