How to create a responsive column chart using CSS Grid layout

I have been playing around with charts for a while now, and out of curiosity, I want to find a better way to create charts using CSS. Started learning online open source chart libraries, which helped me learn new and unfamiliar front-end technologies, such as this one: CSS Grid.

Today I want to share with you what I have learned: how to make a regular responsive bar chart using CSS Grid layout. First, the effect picture:

The example in this article is just an experiment to learn CSS Grid layout. I am also learning as I go, so the code in this article does not have much reference value.

First simple version

It can be a little confusing at first, so let’s focus on creating a simple version. First, we need to write the HTML markup for the chart:

<div class="chart">
  <div class="bar-1"></div>
  <div class="bar-2"></div>
  <div class="bar-3"></div>
  <div class="bar-4"></div>
  <!-- Until bar-12 -->
</div>

These div tags starting with bar- will correspond to a column in the bar chart, and that’s all the HTML needed for the entire article.

Now follow my steps and simple explanations to use CSS to draw the general style of the bar chart step by step. Don’t worry too much about the CSS semantics that may be unfamiliar to you. We will focus on introducing knowledge about CSS Grid later.

Okay, now let's start writing our CSS style. Let's first add some necessary styles to the parent element:

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background-color: #eee;
  display: flex;
  justify-content: center;
}

.chart {
  height: 100vh;
  width: 70vw;
}

We need to have 12 bars in the chart with 5px spacing in between. To meet this requirement, we can write the following Grid-related styles for the parent class .chart :

.chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(100, 1fr);
  grid-column-gap: 5px;
}

For those familiar with Grid layout, this is pretty straightforward. What the above code says is: "I want 12 columns, each with the same width (1fr = 1 fraction), with the height divided into 100 equal parts, 1 equal part into a row (so it's easier to calculate), and with 5px of space between them."

At this point, our chart is still empty because we haven't told our child elements how to take up space in the grid. We use grid-row-start and grid-row-end properties to fill the vertical space in the grid, and we will then define the height of each child element by changing these two properties. Add the following to the child element starting with the style class bar :

[class*='bar'] {
  grid-row-start: 1;
  grid-row-end: 101;
  border-radius: 5px 5px 0 0;
  background-color: #ff4136;
}

Now you can get the following effect:

We tell each bar to start at the top of the grid (1) and end at the bottom (101). Above we divided the grid into 100 rows, why do we use 101 as the value of this property? If you're confused by these Grid properties, that's ok! Before we go any further, let’s explore this a little bit.

Understanding Gridlines

A special feature of Grid Layout is the concept of grid lines, which is very important to understand this new layout tool. Here is a diagram of how the grid lines are drawn in a four row by four column grid:

The corresponding styles of these four rows and four columns are as follows ( special-col ):

.grid {
  grid-gap: 5px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.special-col {
  grid-row: 2 / 4;
  background-color: #333;
}

grid-row is a shorthand property for grid-row-start and grid-row-end . The former indicates the starting position of an element in the grid, and the latter indicates the ending position of an element in the grid. Notice that the black block starts at grid line 2 and ends at grid line 4 (not at row 4). If we want that black box to fill all 4 rows, then we need to end at the 5th grid line, that is: 1 / 5. It is important to understand this.

In other words, we shouldn't think of child elements as taking up entire rows or columns in a grid, but rather only as spanning those grid lines. This took me a while to conceptually understand and get used to, as I recently dug into Jen Simmons' tutorial on the subject.

Back to the example

This is why in our example chart above, all columns end at the value 101, because 101 represents the 101th network line, not the 100th row.

Now, since our .chart uses vw/vh units, we have a responsive chart without having to do any extra work to support responsiveness. If you resize the browser, you'll see that it compresses or stretches just fine, always taking up the entire viewport.

After understanding the concept of network lines, we can easily adjust the height of the columns. We need to make the heights of the columns different.

.bar-1 {
  grid-row-start: 55;
}
.bar-2 {
  grid-row-start: 1;
}
...(slightly);

Finally we make the columns with even numbers different colors:

[class*='bar']:nth-child(odd) {
  background-color: #ff4136;
}

[class*='bar']:nth-child(even) {
  background-color: #0074d9;
}

Effect:

In this way, we have created a responsive bar chart. Of course, this example is just a start, and there is still a lot to do before it can be used in practice. For example, drawing annotations and axes, binding real business data through JS, etc.

This is the end of this article about how to create a responsive bar chart using CSS Grid layout. For more relevant CSS Grid responsive bar chart content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!