js bar chart code example

Example 1: how to make bar chart in javascript

var b1, b2, b3, b4, b5, b6, b7, b8, b9, b10, b11;

function setup() {
  createCanvas(400, 400);
  
  // building 1
  b1=new Building();
  b1.position=4;
  b1.floors=23;
  
  // building 2
  b2=new Building();
  b2.position=1;
  b2.floors=12;
  
  // building 3
  b3=new Building();
  b3.position=2;
  b3.floors=20;
  
  // building 4
  b4=new Building();
  b4.position=3;
  b4.floors=15;
  
  // building 5
  b5=new Building();
  b5.position=5;
  b5.floors=37;
  
  // building 6
  b6=new Building();
  b6.position=6;
  b6.floors=10;
  
  // building 7
  b7=new Building();
  b7.position=7;
  b7.floors=25;
  
  // building 8
  b8=new Building();
  b8.position=8;
  b8.floors=40;
  
  // building 9
  b9=new Building();
  b9.position=9;
  b9.floors=32;
  
  // building 10
  b10=new Building();
  b10.position=10;
  b10.floors=47;
  
  // building 11
  b11=new Building();
  b11.position=0;
  b11.floors=26;
 
}

function draw() {
  background("black");
  b1.display();
  b2.display();
  b3.display();
  b4.display();
  b5.display();
  b6.display();
  b7.display();
  b8.display();
  b9.display();
  b10.display();
  b11.display();
}

Example 2: chart . js bar

new Chart(document.getElementById("mixed-chart"), {
    type: 'bar',
    data: {
      labels: ["1900", "1950", "1999", "2050"],
      datasets: [{
          label: "Europe",
          type: "line",
          borderColor: "#8e5ea2",
          data: [408,547,675,734],
          fill: false
        }, {
          label: "Africa",
          type: "line",
          borderColor: "#3e95cd",
          data: [133,221,783,2478],
          fill: false
        }, {
          label: "Europe",
          type: "bar",
          backgroundColor: "rgba(0,0,0,0.2)",
          data: [408,547,675,734],
        }, {
          label: "Africa",
          type: "bar",
          backgroundColor: "rgba(0,0,0,0.2)",
          backgroundColorHover: "#3e95cd",
          data: [133,221,783,2478]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Population growth (millions): Europe & Africa'
      },
      legend: { display: false }
    }
});

Example 3: chartjs horizontal bar data in front

options: {
  responsive: true,
    maintainAspectRatio: false,
      hover: {
        animationDuration: 0
      },
        animation: {
          duration: 1,
            onComplete: function() {
              let chartInstance = this.chart,
                  ctx = chartInstance.ctx;

              ctx.textAlign = 'center';
              ctx.textBaseline = 'bottom';

              this.data.datasets.forEach(function(dataset, i)
                                         {
                let meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function(bar, index) {
                  let data = dataset.data[index];
                  ctx.fillText(data, bar._model.x + 15 , bar._model.y + 5);
                });
              });
            }
        }
},