bar chart javascript code example

Example 1: chartjs bar data on top

options: {
    "hover": {
      "animationDuration": 0
    },
    "animation": {
      "duration": 1,
      "onComplete": function() {
        var chartInstance = this.chart,
          ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            var data = dataset.data[index];
            ctx.fillText(data, bar._model.x, bar._model.y - 5);
          });
        });
      }
    },
    legend: {
      "display": false
    }
}

Example 2: 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 3: 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 }
    }
});