JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      	text: "Vertical Placement of Index Labels"
      },
			axisY : {
  			maximum: 800
  		},
      data: [
      {
        type: "column",
        indexLabelPlacement: "outside",
        indexLabel: "{y}",
        indexLabelOrientation: "horizontal",  // "horizontal", "vertical"
        dataPoints: [
        {  y: 596, label: "NorthEast"},
        {  y: 448, label: "MidWest"},
        {  y: 393, label: "South"},
        {  y: 377, label: "West"}
        ]
      }
      ]
    });

    chart.render();
  }
  </script>
 <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>