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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
What is the difference between Loosely Typed Language and Strongly Typed Language?MiscellaneousHow to avoid element shift on border change while hovering in CSS?CSSSelf-Driving and Intelligent NetworksMiscellaneousHow to Remove PHP File Extensions From Your Website URLs?PHPWordPress: How to find all posts with a specific custom field value?WordPress3 Common Usability Mistakes In Web DesignUI/UX