how to create a bar chart using html, css and javascript

Bar charts can come in handy especially when you are trying to represent information on your website graphically. In this tutorial, we will be creating a bar chart that displays the names of students and their overall exam scores using HTML, CSS, and JavaScript as shown above. 

Prerequisite

Basic knowledge of HTML, CSS and JavaScript is required to fully grasp the concepts in this tutorial.

HTML

To begin, we have to create the container we will rendering the bars to using HTML as shown below

<div id="chart-out">
  <div id="chart-in">
  
  </div>
</div>

css

Now we apply styles to the HTML code

body {
  font-family: "Fira Sans", sans-serif;
}
#chart-out{
  max-width:500px;
  padding:15px 0;
  margin: 0 auto;
}
#chart-in{
  width:95%;
  margin:0 auto;
  padding-top:5px;
  border-left:1px solid green;
  border-bottom:1px solid green;
}
.bar-out{
  height:30px;
  margin:5px 0;
  position:relative;
  text-align:center;
}
.bar-in{
  height:100%;
  background:#1493B2;
  
  width:100%;
}
.info{
  z-index:10;
  position:absolute;
  border:none;
  height:20px;
  font-size:13px;
  margin-top:5px;
  border-radius:3px;
  background:#C3301E;
  color:#f4f4f4;
  font-weight: bold;
}
.info:focus{
  outline: none;
}

JavaScript

Below is the JavaScript code that takes the arrays of the students and their grades and converts it into bars

//student names
const students = ["James", "Ruth", "John", "Rose", "Jerry", "Chris", "Mathew","Mark","Mary", "Linda"];
//grades of students
const marks = [78, 53, 89, 83, 93, 99, 32, 65, 73, 41];
//grades of students for sorting
const marks2 = [78, 53, 89, 83, 93, 99, 32, 65, 73, 41];

//gets the highest mark
const highestMark = (marksArray) => {
  //return marksArray.sort()[marksArray.length-1];
  let marksArray2 = marksArray;
  marksArray2.sort((a, b) => {return a-b});
  return marksArray[marksArray.length-1];
};

//stores the highest mark in a variable
let highest = highestMark(marks2);

//gets the percentage of the marks with respect to the highest mark
const getBarPercentage = (mark, highest) => {
  return (mark*100)/highest;
};

//adds bars to the div element
const addBar = (name, value, percent) => {
  let infoButton = document.createElement('button');
  let infoText = document.createTextNode(`${name} : ${value}`);
  infoButton.classList.add("info");
  infoButton.appendChild(infoText);
  let barIn = document.createElement("div");
  barIn.classList.add("bar-in");
  barIn.style.width = `${percent}%`;
  let barOut = document.createElement("div");
  barOut.classList.add("bar-out");
  barOut.appendChild(infoButton);
  barOut.appendChild(barIn);
  
  document.getElementById("chart-in").appendChild(barOut);
};

//displays all the bars
const displayBars = (students,marks,highest) => {
  for(let i=0; i<students.length; i++){
    addBar(students[i], marks[i], getBarPercentage(marks[i], highest));
  }
};
displayBars(students, marks, highest);

CONCLUSION

Thats our bar chat, you can add you tweaks and make your own version of it.