CSS Charts: How to Create an Organizational Chart


In previous tutorials we have learned how to create different charts including bar charts, thermometer charts, and donut charts. Today we will continue this journey by just creating a CSS organizational chart.

Are you ready to test your CSS skills?

Here is the CSS chart we are creating:

It consists of four levels and describes a company’s ranking structure.

To find out what an organizational chart is, let’s take a look at Wikipedia:

An organizational chart, also called آرگنگرام Or آرگنگرام, Is a diagram that shows the structure of an organization and the relationship of its parts and positions / jobs and related ranks. The term is also used for similar diagrams, for example those that represent different elements of the field of knowledge or groups of languages.

Here is an example:

By S.s.kulkarni9090 – Your work, CC BY-SA 3.0

This type of chart is commonly used to represent the relationships between people or departments in a company. On a corporate website, you’ll probably find it on the “About Us” or “Company” page.

You will also find organizational charts used for family trees (see British royal tree and succession line on the BBC website). They are suitable for ranking examples.

Our chart will stay inside the container:

Before going through this level, we will set up some reset rules and helper classes:

Note rectangle Class We will add it to each node / element of our chart.

Note: For simplicity, I did not improve the CSS. This will help you gain a better understanding of the style at each level.

At this point, we are ready to explain the chart level. As we discussed earlier, here we have four of them:


Each level will represent a role in a company of top companies.

Level 1

The first level will include only one node:

Level 1


To illustrate this, we will use one h1 Tag the most important part of our chart as:


We will use it ::before Pseudo-factor to create a relationship between the first and second level:

Level # 2

The second level will consist of two nodes:

Level 2

As we will see in a moment, each node will contain other nodes of children.

These children will represent the lower level of the nodes management rankings.


To illustrate this, we will use an ordered list of two list items. Each list will contain an item h2 Element:


Thanks to CSS Grid, we will create layouts for this level.

Next, we’ll use that ::before The pseudo-element of specific elements to create an association between the nodes of this level and the adjacent surface:

Note that we also appreciate ::after Pseudo element of second level nodes. It will only appear on small screens.

Level # 3

The third level will consist of four nodes.

We will associate the first two nodes with the first node of the second level, while we will associate the last two nodes with its second node.

Level 3


However, within the initial list where the second level resides, we will specify two new lists. Each of these will have two list items. Will specify one for each item h3 Element:


Thanks again to CSS Grid, we will keep the nodes in position.

Similarly, we will set ::before Pseudo element of specific elements to make the desired contact:

Level # 4

We need 16 nodes for the fourth level. They will be evenly divided into four lists.

Each third-level node will include a list:

Level 4


However, within the initial list where the second level resides, we will specify four new lists. Each of these will have four list items. Will specify one for each item h4 Element:


Again, we’ll sort it out ::before Pseudo element of specific elements to connect fourth level nodes with your parents:

Organizational charts and are going to be accepted

Organizational charts are hard to answer. I remember having to recreate the markup once or twice until this version came out. So, if you plan to create a chart like this, I suggest you go mobile-first.

With that in mind, here’s the mobile layout:

Responsive layout of organization chart

To complete this practice, we need to modify some styles:

We’ve finished our CSS chart!

Congratulations, folks! Without writing a single line of JavaScript, we were able to create a fully functional organizational chart.

Let’s remind ourselves of what we made:

Of course, keep in mind that our charts have a specific structure. Depending on your needs, you may want to enrich the content or modify the layout. If you need something more advanced or dynamic, take a look at JavaScript libraries like Highcharts.js.

Have you ever created a CSS chart? If so, please share your experience with us!

More CSS charts (sometimes with JavaScript)

If you still need some inspiration, don’t forget to check out my other charts in the Tits + Archives or search the CodePan quickly.

As always, thanks so much for reading!

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top