Basic Column Chart - CanvasJS

Basic Column Chart

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",
    {
      title:{
        text: "Understanding Legend"
      },

      legend: {
       horizontalAlign: "left", // "center" , "right"
       verticalAlign: "center",  // "top" , "bottom"
       fontSize: 15
     },
     data: [
     {
      type: "doughnut",
      showInLegend: true,
      dataPoints: [
      {name: "Jon", y: 230 },
      {name: "Jose", y: 245},
      {name: "Joey", y: 345},
      {name: "Trin", y: 367 },
      ]
    }
    ]
  });


chart.render();