JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
  <div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/chart-options/legend/" target="_blank" title="legend - Sets Legend Properties ">https://canvasjs.com/docs/charts/chart-options/legend/</a></div>

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer",{
    title:{
      text: "Understanding Legend"
    },
		axisX: {
    	interval: 1
    },
    legend: {
      horizontalAlign: "left", // "center" , "right"
      verticalAlign: "center",  // "top" , "bottom"
      fontSize: 15
    },
    data: [
      {
        type: "bar",
        showInLegend: true,
        legendText: "Numbers",
        dataPoints: [
          {label: "Jon", y: 230 },
          {label: "Jon1", y: 230 },
          {label: "Jose", y: 245},
          {label: "Jose1", y: 245},
          {label: "Joey", y: 345},
          {label: "Joey1", y: 345},
          {label: "Trin", y: 367 },
          {label: "Trin1", y: 367 },
          {label: "Mike", y: 453 },
          {label: "Mike1", y: 453 },
          {label: "Hulk", y: 256 },
          {label: "Hulk1", y: 256 },
          {label: "Dan", y: 478},
          {label: "Dan1", y: 478},
          {label: "Nate", y: 543 },      
          {label: "Nate1", y: 543 },      
          {label: "Jen", y: 456 },
          {label: "Jen1", y: 456 }
        ]
      }
    ]
  });

  chart.render();
}