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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #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
You might also like these
How does @extend rule work in SCSS (Sass)?SCSSSpecificity of attribute selectorsCSSComposing and Extracting Components in ReactReactHow to create two segues with two UIButtons on a single page (Swift 5.0)?Swiftfirst-of-type and last-of-type selectors in CSSCSSHow to solve “framework not found” error in Swift?Swift