Web Development: CSS Charts: How to Create a Horizontal Organizational Chart

CSS Charts: How to Create a Horizontal Organizational Chart

In a previous tutorial, we learned how to create a CSS-only vertical organizational chart. Today, as some folks requested, we’ll go through the process of building its corresponding horizontal one.

CSS

CSS Charts: How to Create an Organizational Chart

George Martsoukos

And here’s the twist; we'll create this new chart without changing a single line of markup from the original, we'll only modify the styles.

Keep in mind, as the concept remains the same, we'll be grabbing some parts from the other tutorial. Ready to test your CSS skills again?

The Organizational Chart We’re Building

Here’s the CSS chart we’ll be creating:

On screens up to 1300px wide, the chart will appear in a vertical layout. On larger screens, its data will appear horizontally. Be sure to check this behavior by opening the demo on a large screen and resizing your browser window.

1. Specify the Container

Our chart will live inside a container:

<div class="container">
  <!-- Chart goes here -->
</div>

2. Define Some Basic Styles

Before examining its levels, we’ll set up a few reset rules and helper classes:

:root {
  --level-1: #8dccad;
  --level-2: #f5cc7f;
  --level-3: #7b9fe0;
  --level-4: #f27c8d;
  --black: black;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ol {
  list-style: none;
}

body {
  margin: 50px 0 100px;
  text-align: center;
  font: 20px/1.5 "Inter", sans-serif;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
}

.container {
  max-width: 800px;
  padding: 0 10px;
  margin: 0 auto;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-column-gap: 20px;
  grid-template-columns: auto auto;
}

.rectangle {
  position: relative;
  padding: 20px;
  width: 200px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

Notice the rectangle class. We’ll append this to every node/element of our chart.

Additionally, keep an eye on the container styles. Thanks to CSS Grid, we can divide the chart into two parts. The first one will include the first level, while the second one all the others. Plus, we’ll give the container a maximum width that will affect only on smaller screens.

Note: for simplicity, I haven’t optimized the CSS. This will help you get a better understanding of the styles of each level.

3. Specify the Levels

At this point, we’ll have a closer look at the chart levels. As you might remember from the previous tutorial, we’ll have four of them:

Level #1

The first level will only include a single node:

HTML

To describe it, we’ll use an h1 tag as it’s the most important part of our chart:

<h1 class="level-1 rectangle">...</h1>

CSS

We’ll use its ::before pseudo-element to create a relationship between the first and second levels:

/*CUSTOM VARIABLES HERE*/

.level-1 {
  background: var(--level-1);
}

.level-1::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

Level #2

The second level will consist of two nodes:

HTML

To describe it, we’ll use an ordered list with two list items. Each list item will contain an h2 element:

<ol class="level-2-wrapper">
  <li>
    <h2 class="level-2 rectangle">...</h2>
  </li>
  <li>
    <h2 class="level-2 rectangle">...</h2>
  </li>
</ol>

CSS

Each list item will act as a grid container that will contain two columns. We'll position the contents of its first one on the top edge of the column axis, while the contents of its last one on the bottom edge of the column axis.

We’ll also define the ::before and ::after pseudo-elements of the h2 elements. Their job will be to create the associations between the adjacent levels:

/*CUSTOM VARIABLES HERE*/

.level-2-wrapper {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid var(--black);
}

.level-2-wrapper::before {
  display: none;
  content: "";
  position: absolute;
  top: -20px;
  left: 10px;
  width: 2px;
  height: calc(100% + 40px);
  background: var(--black);
}

.level-2-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: 10px;
  bottom: -20px;
  width: calc(100% - 10px);
  height: 2px;
  background: var(--black);
}

.level-2-wrapper > li {
  position: relative;
  display: grid;
  align-items: flex-start;
  grid-column-gap: 20px;
  grid-template-columns: auto auto;
}

.level-2-wrapper > li:last-child {
  margin-top: 100px;
  align-items: flex-end;
}

.level-2 {
  background: var(--level-2);
}

.level-2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

.level-2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

Level #3

The third level will include four nodes.

We’ll associate the first two nodes with the first node of the second level, while the last two with its second node:

HTML

Still, inside the initial list where the second level lives, we’ll define two new lists. Each one of them will contain two list items. For each item will specify an h3 element:

<ol class="level-2-wrapper">
  <li>
    ...
    <ol class="level-3-wrapper">
      <li>
        <h3 class="level-3 rectangle">...</h3>
      </li>
      <li>
        <h3 class="level-3 rectangle">...</h3>
      </li>
    </ol>
  </li>
  <li>
    ...
    <ol class="level-3-wrapper">
      <li>
        <h3 class="level-3 rectangle">...</h3>
      </li>
      <li>
        <h3 class="level-3 rectangle">...</h3>
      </li>
    </ol>
  </li>
</ol>

CSS

Similarly to the previous level, we’ll consider each list item as a grid container and split it into two columns.

In the same way, we’ll set the ::before and ::after pseudo-elements of the h3 elements for creating the required connections:

/*CUSTOM VARIABLES HERE*/

.level-3-wrapper {
  position: relative;
  top: 34px;
  padding-left: 20px;
  border-left: 2px solid var(--black);
}

.level-3-wrapper::before {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 2px;
  height: 100%;
  background: var(--black);
}

.level-3-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: 10px;
  bottom: 0px;
  width: calc(100% - 10px);
  height: 2px;
  background: var(--black);
}

.level-3-wrapper > li {
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: auto auto;
}

.level-3-wrapper > li:last-child {
  margin-top: 80px;
}

.level-2-wrapper > li:last-child .level-3-wrapper {
  top: -34px;
}

.level-3 {
  background: var(--level-3);
}

.level-3::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

.level-3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

Note: if your text nodes span on a separate line, you have to change the top: 34px and top: -34px hardcoded values.

Level #4

We’ll need sixteen nodes for the fourth level. These will equally be distributed into four lists.

Each third-level node will include one list:

HTML

Still, inside the initial list where the second level lives, we’ll define four new lists. Each one of them will contain four list items. For each item we’ll specify an h4 element:

<ol class="level-2-wrapper">
  <li>
    ...
    <ol class="level-3-wrapper">
      <li>
        ...
        <ol class="level-4-wrapper">
          <li>
            <h4 class="level-4 rectangle">...</h4>
          </li>
          ...
        </ol>
      </li>
      <li>
        ...
        <ol class="level-4-wrapper">
          <li>
            <h4 class="level-4 rectangle">...</h4>
          </li>
          ...
        </ol>
      </li>
    </ol>
  </li>
  <li>
    ...
    <ol class="level-3-wrapper">
      <li>
        ...
        <ol class="level-4-wrapper">
          <li>
            <h4 class="level-4 rectangle">...</h4>
          </li>
          ...
        </ol>
      </li>
      <li>
        ...
        <ol class="level-4-wrapper">
          <li>
            <h4 class="level-4 rectangle">...</h4>
          </li>
          ...
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

Once again, we’ll do the same actions. Firstly, we’ll use the CSS Grid to create the layout for the fourth-level nodes. Then, we’ll specify the required pseudo-element of target elements for establishing the connections:

/*CUSTOM VARIABLES HERE*/

.level-4-wrapper {
  position: relative;
  top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  padding-left: 20px;
}

.level-4-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 50%;
  background: var(--black);
}

.level-3-wrapper > li:last-child .level-4-wrapper {
  top: -34px;
}

.level-3-wrapper > li:last-child .level-4-wrapper::before {
  top: auto;
  bottom: 0;
}

.level-4 {
  background: var(--level-4);
}

.level-4::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
}

Note: if your text nodes span on a separate line, you have to change the top: 34px and top: -34px hardcoded values.

4. Going Responsive

As you have already guessed, we follow a desktop-first approach for our styles. Generally speaking, I prefer building for large screens first and then going down to smaller, less complicated ones.

On screens between 1301px and 1650px, the chart will still be in horizontal mode, yet its nodes will have a smaller width (200px instead of 150px).

On screens up to 1300px wide, all chart nodes will appear vertically, like this:

Responsive Layout of Horizontal Organization Chart

Unlike the horizontal layout, here the width and typography of the text nodes differ depending on their level. The higher the level, the larger the width and typography.

Of course, feel free to change these breakpoints depending on your content.

It’s worth noting that this design is slightly different compared to the responsive layout of the vertical chart:

In case you’re wondering, there isn't any specific purpose behind this new implementation. I just wanted to show you two different responsive layouts. Feel free to use any of these in your pages.

Here are the responsive styles:

@media screen and (max-width: 1650px) {
  .rectangle {
    width: 150px;
  }
}

@media screen and (max-width: 1300px) {
  body {
    font-size: 16px;
  }
  
  h1,
  h2,
  h3,
  h4 {
    font-size: revert;
  }

  .rectangle {
    padding: 20px 10px;
    width: auto;
  }

  .container {
    display: block;
  }

  .level-1 {
    margin-bottom: 20px;
  }

  .level-1::before,
  .level-2::after,
  .level-3::after {
    display: none;
  }

  .level-2-wrapper::before,
  .level-2-wrapper::after,
  .level-3-wrapper::before,
  .level-3-wrapper::after,
  .level-2-wrapper > li,
  .level-3-wrapper > li {
    display: block;
  }

  .level-2-wrapper {
    padding-left: 30px;
    border-left: none;
  }

  .level-2-wrapper > li:last-child {
    margin-top: 50px;
  }

  .level-2-wrapper > li:last-child .level-3-wrapper,
  .level-3-wrapper > li:last-child .level-4-wrapper,
  .level-3-wrapper,
  .level-4-wrapper {
    top: 0;
  }

  .level-3-wrapper {
    padding: 20px 0 20px 30px;
    border-left: none;
  }

  .level-3-wrapper > li:last-child {
    margin-top: 50px;
  }

  .level-4-wrapper {
    padding: 20px 0 0 30px;
    grid-template-columns: repeat(2, 1fr);
  }

  .level-4-wrapper > li:first-child {
    margin-bottom: 20px;
  }

  .level-4-wrapper::before {
    left: 10px;
    height: 100%;
  }
}

The Revert Keyword

From the styles above, keep an eye especially on the new revert CSS keyword that we apply to the headings. That will help us restore their default browser styles. Merrily enough, its browser support is growing every day.

Conclusion

That’s all for today, folks! At this point, you have everything you need to build your own CSS-only organizational charts.

Indeed, in a real scenario, you might prefer to use a powerful JavaScript library like Highcharts.js for creating such a chart. However, pushing the limits of CSS without ignoring its limitations is always a great way to learn and expand your knowledge. Moreover, with the combination of tools/features like the CSS Grid and pseudo-elements you can accomplish really neat things.

Let’s remind ourselves of what we built:

Go ahead, fork the demo and get your hands dirty. Don’t be afraid to destroy and experiment with it. You can achieve different variations without putting in too much effort. For example, here’s another quick alternative for desktop screens:

Another implementation for the horizontal organizational chart

Last but not least, here at Tuts+ there are a lot of detailed tutorials showing how to implement different kinds of CSS charts (sometimes with JavaScript). Be sure to have a look, and as always, thanks a lot for reading!