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

In a previous tutorial, we realized find out how to create a CSS-only vertical organizational chart. At the moment, as some people 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 types.

Consider, 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 format. On bigger screens, its knowledge will seem horizontally. Remember to examine this conduct by opening the demo on a big display and resizing your browser window. 

1. Specify the Container

Our chart will dwell inside a container:

2. Outline Some Primary Kinds

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

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

Moreover, keep watch over the container types. Due to CSS Grid, we are able to 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 may have an effect on solely on smaller screens.

The parts of chart container

Be aware: for simplicity, I haven’t optimized the CSS. It will assist you get a greater understanding of the types 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

Stage #1

The primary stage will solely embrace a single node:

Level 1


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


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

Stage #2

The second stage will include two nodes:

Level 2


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


Every record merchandise will act as a grid container that may 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 shall be to create the associations between the adjoining ranges:

Stage #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 record the place the second stage lives, we’ll outline two new lists. Every one among them will include two record gadgets. For every merchandise will specify an h3 factor:


Equally to the earlier stage, we’ll contemplate every record merchandise as a grid container and break up it into two columns.

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

Be aware: in case your textual content nodes span onto a separate line, you need to change the next hardcoded values: high: 34px and high: -34px.

Stage #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 record:

Level 4


Nonetheless, contained in the preliminary record the place the second stage lives, we’ll outline 4 new lists. Every one among them will include 4 record gadgets. 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 format for the fourth-level nodes. Then, we’ll specify the required pseudo-element of goal parts for establishing the connections: 

Be aware: in case your textual content nodes span on a separate line, you need to change the high: 34px and high: -34px hardcoded values.

4. Going Responsive

As you’ve already guessed, we comply with a desktop-first strategy for our types. Typically talking, I want constructing for big 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 could 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 format, 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 vary these breakpoints relying in your content material.

It’s value noting that this design is barely totally different in comparison with the responsive format of the vertical chart:

Responsive Layout of Organization Chart

In case you’re questioning, there’s no particular goal behind this new implementation. I simply wished to indicate you two totally different responsive layouts. Be at liberty to make use of any of those in your pages.  

Listed here are the responsive types:

The Revert Key phrase

From the types above, preserve 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 types. Merrily sufficient, its browser support is rising every single day. 


That’s all for at present, people! At this level, you’ve all the pieces it is advisable construct your personal CSS-only organizational charts.

Certainly, in an actual state of affairs, you would possibly want to make use of a robust JavaScript library like Highcharts.js for creating such a chart. Nevertheless, pushing the bounds of CSS with out ignoring its limitations is at all times an effective way to be taught and develop your data. Furthermore, with the mix of instruments/options just like the CSS Grid and pseudo-elements you’ll be able to accomplish actually neat issues.

Let’s remind ourselves of what we constructed:

Go forward, fork the demo and get your fingers soiled. Don’t be afraid to destroy and experiment with it. You may obtain totally 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 plenty of detailed tutorials displaying find out how to implement different kinds of CSS charts (generally with JavaScript). Make sure to take a look, and as at all times, thanks lots for studying!

Source link