Monday March 8, 2021 By David Quintanilla
CSS Charts: How to Create a Horizontal Organizational Chart

In a previous tutorial, we discovered methods to create a CSS-only vertical organizational chart. Immediately, as some of us requested, we’ll undergo the method of constructing its corresponding horizontal one. 

And right here’s the twist; we’ll create this new chart with out altering a single line of markup from the unique, we’ll solely modify the kinds.

Remember, because the idea stays the identical, we’ll be grabbing some components from the opposite tutorial. Prepared to check your CSS abilities once more?

The Organizational Chart We’re Constructing

Right here’s the CSS chart we’ll be creating:

On screens as much as 1300px large, the chart will seem in a vertical structure. On bigger screens, its knowledge will seem horizontally. Remember to verify this conduct by opening the demo on a big display screen and resizing your browser window. 

1. Specify the Container

Our chart will stay inside a container:

2. Outline Some Primary Types

Earlier than analyzing its ranges, we’ll arrange a number of reset guidelines and helper courses:

Discover the rectangle class. We’ll append this to each node/factor of our chart.

Moreover, control the container kinds. Due to CSS Grid, we will divide the chart into two components. The primary one will embrace the primary stage, whereas the second all of the others. Plus, we’ll give the container a most width that can have an effect on solely on smaller screens.

The parts of chart container

Observe: for simplicity, I haven’t optimized the CSS. This can assist you get a greater understanding of the kinds of every stage. 

3. Specify the Ranges

At this level, we’ll have a more in-depth have a look at the chart ranges. As you would possibly keep in mind from the earlier tutorial, we’ll have 4 of them:

The chart levels

Degree #1

The primary stage will solely embrace a single node:

Level 1


To explain it, we’ll use an h1 tag because it’s an important a part of our chart:


We’ll use its ::earlier than pseudo-element to create a relationship between the primary and second ranges:

Degree #2

The second stage will include two nodes:

Level 2


To explain it, we’ll use an ordered checklist with two checklist objects. Every checklist merchandise will include an h2 factor:


Every checklist merchandise will act as a grid container that can include two columns. We’ll place the contents of its first one on the highest fringe of the column axis, whereas the contents of its final one on the underside fringe of the column axis.

We’ll additionally outline the ::earlier than and ::after pseudo-elements of the h2 parts. Their job will likely be to create the associations between the adjoining ranges:

Degree #3

The third stage will embrace 4 nodes.

We’ll affiliate the primary two nodes with the primary node of the second stage, whereas the final two with its second node: 

Level 3


Nonetheless, contained in the preliminary checklist the place the second stage lives, we’ll outline two new lists. Every one in all them will include two checklist objects. For every merchandise will specify an h3 factor:


Equally to the earlier stage, we’ll think about every checklist merchandise as a grid container and cut up it into two columns.

In the identical approach, we’ll set the ::earlier than and ::after pseudo-elements of the h3 parts for creating the required connections:

Observe: in case your textual content nodes span onto a separate line, it’s a must to change the next hardcoded values: prime: 34px and prime: -34px.

Degree #4

We’ll want sixteen nodes for the fourth stage. These will equally be distributed into 4 lists.

Every third-level node will embrace one checklist:

Level 4


Nonetheless, contained in the preliminary checklist the place the second stage lives, we’ll outline 4 new lists. Every one in all them will include 4 checklist objects. For every merchandise we’ll specify an h4 factor:


As soon as once more, we’ll do the identical actions. Firstly, we’ll use the CSS Grid to create the structure for the fourth-level nodes. Then, we’ll specify the required pseudo-element of goal parts for establishing the connections: 

Observe: in case your textual content nodes span on a separate line, it’s a must to change the prime: 34px and prime: -34px hardcoded values.

4. Going Responsive

As you have got already guessed, we observe a desktop-first strategy for our kinds. Typically talking, I favor constructing for giant screens first after which happening to smaller, easier ones.

On screens between 1301px and 1650px, the chart will nonetheless be in horizontal mode, but its nodes may have a smaller width (200px as an alternative of 150px).

On screens as much as 1300px large, all chart nodes will seem vertically, like this:

Responsive Layout of Horizontal Organization Chart

In contrast to the horizontal structure, right here the width and typography of the textual content nodes differ relying on their stage. The upper the extent, the bigger the width and typography.

After all, be at liberty to alter these breakpoints relying in your content material.

It’s price noting that this design is barely completely different in comparison with the responsive structure of the vertical chart:

Responsive Layout of Organization Chart

In case you’re questioning, there is no particular goal behind this new implementation. I simply needed to indicate you two completely different responsive layouts. Be happy to make use of any of those in your pages.  

Listed below are the responsive kinds:

The Revert Key phrase

From the kinds above, hold a watch particularly on the brand new revert CSS key phrase that we apply to the headings. That may assist us restore their default browser kinds. Merrily sufficient, its browser support is rising daily. 


That’s all for at the moment, of us! At this level, you have got the whole lot it’s essential construct your personal CSS-only organizational charts.

Certainly, in an actual situation, you would possibly favor to make use of a strong JavaScript library like Highcharts.js for creating such a chart. Nonetheless, pushing the bounds of CSS with out ignoring its limitations is at all times an effective way to be taught and broaden your information. Furthermore, with the mix of instruments/options just like the CSS Grid and pseudo-elements you may accomplish actually neat issues.

Let’s remind ourselves of what we constructed:

Go forward, fork the demo and get your arms soiled. Don’t be afraid to destroy and experiment with it. You possibly can obtain completely different variations with out placing in an excessive amount of effort. For instance, right here’s one other fast different for desktop screens:

Another implementation for the horizontal organizational chart

Final however not least, right here at Tuts+ there are quite a lot of detailed tutorials displaying methods to implement different kinds of CSS charts (typically with JavaScript). Ensure to take a look, and as at all times, thanks rather a lot for studying!

Source link