YogeshChauhan . com

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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to display and animate image on scroll using JavaScript?JavaScriptLIMIT and OFFSET in PostgresPostgresHow to Create a Backup From Any Database in SQL?SQL/MySQLHow to change HTML content on click using JavaScript?JavaScript3 JavaScript methods to use when you want to go back and forth in historyJavaScriptWhat is Object Mutability in JavaScript?JavaScript