HTML5 & JS Column Charts - 0 | JSFiddle Sample Code

HTML5 & JS Column Charts - 0 | JSFiddle Sample Code

HTML

<script src="https://canvasjs.com/assets/script/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-types/html5-column-chart/" target="_blank" title="HTML5 &amp; JS Column Charts ">https://canvasjs.com/docs/charts/chart-types/html5-column-chart/</a></div>

JavaScript

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Top Oil Reserves"
      },
      data: [

      {
        dataPoints: [
        { x: 1, y: 297571, label: "<span class='text-danger'>ABC</span> Venezuela", labelColor:"red"},
        { x: 2, y: 267017,  label: "Saudi" },
        { x: 3, y: 175200,  label: "Canada"},
        { x: 4, y: 154580,  label: "Iran"},
        { x: 5, y: 116000,  label: "Russia"},
        { x: 6, y: 97800, label: "UAE"},
        { x: 7, y: 20682,  label: "US"},
        { x: 8, y: 20350,  label: "China"}
        ]
      }
      ]
    });

    chart.render();
  }