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

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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

Learn how to use Self JOIN in SQL and MySQLSQL/MySQLReverse a String in JavaScriptJavaScriptHow to get the height and width of an element using JavaScript?JavaScriptKilling A Project Part 2: Who should make the decision to kill a project?MiscRecursive WITH Queries in Postgres (Common Table Expressions)PostgresAn Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHP