Yogesh Chauhan's Blog

Create a simple bar chart and column chart using pure CSS grid

in CSS on March 25, 2021

This is our end goal:

We can go far with amazing CSS grids, it’s not just limited to creating a responsive gallery.

Step 1: Add he container and the background columns.

Let’s add some basic elements and style first. I have fonts and margin set for body — change it as per your requirements.

The important thing to pay attention while adding the elements and style is you need to set the position relative for outside container(.chart) of columns and the inside container’s position to absolute with top and left properties set to 0.

After that all we need to do is set the display of inside container(.column-bars) to grid and adjust the rows and columns dimensions as per your need.

Step 2: Add the bars on top of the columns.

Again, the important thing to remember while adding the bars is that the inside container(.row-bars) position should be set to absolute with top and left properties set to 0. Also, the width property should be same as total width of the columns grid behind it which is 300px in this example.

While adding the bars, we will keep few things in mind. First, setting the display property as block and second setting the height property.

max-width property should be set in case you want to use px unit in HTML to set the width.

If you use other unit then it will stay inside the total width of container anyways (unless you really go beyond — like 100%).

I have set the background-color of each bar using CSS which can be done using HTML or dynamically as well. Use your imagination to make your project look visually appealing.

Step 3: Add a nice title.

Nothing fancy. Just a simple nice title. Here it is.

How to change it to a column chart?

Just rotate the bar chart container and you’ll have a column chart. Of course, you need to adjust the position as well.

Change this code to turn that bar chart into a column chart. Adjust the code as per your requirements.


.chart {
  position: absolute;
  transform: rotate(270deg);
  left: 50px;
  top: 425px;
}

Here’s the column chart:

How to make the charts dynamic?

Just use the width property in HTML of each bar and set the value using server(PHP, Python etc) or client side script (JavaScript, TypeScript etc.).

How to make the charts responsive?

The charts are dependent on the grid and then the fixed width and height of the bars. Just use minmax function for grid to make it responsive and set the max-width and max-height property for the bars with height and width unit in percentage. It should work.

If you don’t want to go through this ling process then Google has really nice collection of charts and graphs. Check that out as well.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to get the first element with a class name xyz using JavaScript?JavaScriptWordPress: How to display slider repeater fields in ACF?WordPress2 Ways We Can Write Multiple Line Commands in PHPPHPHow to display and animate image on scroll using JavaScript?JavaScriptHow to Use Aggregate Functions (MIN, MAX, SUM, AVG, COUNT) to Summarize Data in SQL?SQL/MySQLAn Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHP