Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<div class="container mt-4">
  <div class="row">

    <div class="col-md-4 text-center">
      <b>G1</b>
      <div id="bar_G1" style="height:250px; width:100%;"></div>

    </div>

    <div class="col-md-4 text-center">
      <b>G2</b>
      <div id="bar_G2" style="height:250px; width:100%;"></div>
     
    </div>

    <div class="col-md-4 text-center">
      <b>G3</b>
      <div id="bar_G3" style="height:250px; width:100%;"></div>
      
    </div>

  </div>
</div>

JavaScript

// P1
new CanvasJS.Chart("bar_G1", {
  animationEnabled: true,
  axisX: { gridThickness:0, lineThickness:0, tickThickness:0, margin:0, labelFormatter:()=>"" },
  axisY: { gridThickness:0, lineThickness:0, tickThickness:0, maximum:100, margin:0, labelFormatter:()=>"" },
  toolTip:{ enabled:false },
  data: [{
    type: "bar",
    color: "#4caf50",
    indexLabel: "1000", 
    indexLabelFontSize: 12,
    indexLabelPlacement: "outside",
    dataPoints: [{ y: (1000/1000)*100, label: "P1" }]
  }]
}).render();

// P2
new CanvasJS.Chart("bar_G2", {
  animationEnabled: false,
  axisX: { gridThickness:0, lineThickness:0, tickThickness:0, margin:0, labelFormatter:()=>"" },
  axisY: { gridThickness:0, lineThickness:0, tickThickness:0, maximum:100, margin:0, labelFormatter:()=>"" },
  toolTip:{ enabled:false },
  data: [{
    type: "bar",
    color: "#4caf50",
    indexLabel: "500", 
    indexLabelFontSize: 12,
    indexLabelPlacement: "outside",
    dataPoints: [{ y: (500/1000)*100, label: "P2" }]
  }]
}).render();

// P3
new CanvasJS.Chart("bar_G3", {
  animationEnabled: true,
  axisX: { gridThickness:0, lineThickness:0, tickThickness:0, margin:0, labelFormatter:()=>"" },
  axisY: { gridThickness:0, lineThickness:0, tickThickness:0, maximum:100, margin:0, labelFormatter:()=>"" },
  toolTip:{ enabled:false },
  data: [{
    type: "bar",
    color: "#4caf50",
    
    indexLabel: "900", 
    indexLabelFontSize: 12,
    indexLabelPlacement: "outside",
   
    dataPoints: [{ y: (900/1000)*100, label: "P3" }]
  }]
}).render();