How to Build an Animated CSS Thermometer Chart

So far in our series of CSS chart tutorials I’ve shown you how to build a column chart, a bar chart, and a semi-circle donut chart.

In this tutorial I’ll cover the process of creating a pure CSS animated “thermometer” chart; the perfect way to track achievement of a single target.

What We’re Building

Here’s the chart we’ll be creating (hit reload to see it animate):

Please accept marketing cookies to load this content.

1. Begin With The Data

For the purposes of this demo, we’ll need some data. Let’s work with some fictional figures that describe the funding of a charitable organization over the years:

Year	Funding
2018	€95,000
2016	€72,000
2015	€50,000
2012	€35,000
2010	€15,000

As you might’ve guessed, our challenge is to visualize this data in a thermometer chart. We’ll be taking our visual inspiration from those troublesome do-gooders Extinction Rebellion (if you haven’t heard of them, check out what they’re up to!).

2. Specify the Page Markup

We’ll specify a wrapper element which contains three lists:

The first list sets the y-axis range. If you take a closer look at the table data above, you’ll see that the second column includes values up to 95,000. Keeping this in mind, we’ll define six values from 0 to 100,000 with a step size of 20,000. The values of the y-axis will therefore be 0, 20,000, 40,000, 60,000, 80,000, and 100,000.
The second list sets the x-axis data. These are extracted from the first column of our table, from lowest to highest. But their order doesn’t matter because we’ll absolutely position them. Notice in the markup below though, that a list item contains the same year twice. We could’ve omitted setting the year as the item’s text node. But it’s important to store this value in the data-year attribute. As we’ll see later, we’ll pass the value of this attribute to the related ::before pseudo-element.
The third list groups the aforementioned table data, from the highest funding value to the lowest one. Again here the order isn’t important. You can show them from lowest to highest as well. This is completely up to you.

Here’s the required markup:

1	<div class="chart-wrapper">
2	<ul class="chart-y">
3	<li>€100,000</li>
4	...
5	</ul>
6	<ul class="chart-x">
7	<li data-year="2010">2010</li>
8	...
9	</ul>
10	<ul class="chart-labels">
11	<li>2018 - €95,000</li>
12	...
13	</ul>
14	</div>

3. Define Some Basic Styles

Coming up next, we’ll set up a few CSS variables and some common reset styles:

@font-face {
  font-family: "Cheddar Gothic Sans";
  src: url("cheddargothic-sans-webfont.woff2") format("woff2"),
       url("cheddargothic-sans-webfont.woff") format("woff");
}

:root {
  --brand-color: #21a73d;
  --chart-bg-color: rgba(211, 211, 211, .3);
  --chart-line-color: black;
  --chart-x-color: white;  
  --line-color1: crimson;
  --line-color2: gold;
  --line-color3: firebrick;
  --line-color4: orange;
  --line-color5: darkblue;
  --black: #2d2929;
  --white: white;
  --transition-delay: 0.6s;
  --transition-delay-step: 0.6s;
}

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

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  font: 1rem/1.2 Georgia, serif;
  padding-top: 70px;
  background: var(--brand-color);
}

Nothing really spectacular happens here, but perhaps one thing to note is that apart from the well-known “Georgia” system serif font, I’ve also used the premium “Cheddar Gothic” font taken from Envato Elements.

Cheddar Gothic Font Family on Envato Elements

Note: For simplicity I won’t walk through all the CSS rules in the tutorial. You can check the rest of them by clicking the CSS tab of the demo project.

4. Style the Chart

The chart wrapper will be a grid container with horizontally centered content. Each column (list) will have its default width, with a 4rem gap between them.

Here’s the related CSS:

.chart-wrapper {
  display: grid;
  justify-content: center;
  grid-column-gap: 4rem;
  grid-template-columns: auto auto auto;
}

The y-axis

The first list which contains the y-axis data will also behave as a grid container. There’ll be a 3rem gap between the items:

Here’s the associated CSS:

1	.chart-wrapper .chart-y {
2	display: grid;
3	grid-row-gap: 3rem;
4	}

The x-axis

The second list which includes the x-axis data will have a fixed width of 50px. Furthermore, we’ll give it some additional styles so it’ll have the appearance of a real thermometer:

The corresponding styles are as follows:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x {
  position: relative;
  width: 50px;
  border-radius: 25px;
  border: 8px solid var(--chart-line-color);
  background: var(--chart-bg-color);
  overflow: hidden;
}

The list items will be absolutely positioned with an initial height of 0–hence by default, they’ll be invisible. Another thing we do is set their foreground color as transparent. In such a case, their text which contains the year won’t be visible:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  color: transparent;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background: var(--chart-x-color);
  transition: height 0.5s ease-out;
}

For the next step we’ll specify some styles for their ::before pseudo-element. Remember its content will include the value of the associated data-year attribute (see markup above). Plus, it’ll be initially hidden:

The required styles:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li::before {
  content: attr(data-year);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-top: 4px solid;
  width: 20px;
  opacity: 0;
  padding-left: 3px;
  color: var(--black);
  font-size: 0.75rem;
  transition: opacity 0.5s ease-out;
}

.chart-wrapper .chart-x li:nth-child(1)::before {
  border-color: var(--line-color1);
}

.chart-wrapper .chart-x li:nth-child(2)::before {
  border-color: var(--line-color2);
}

.chart-wrapper .chart-x li:nth-child(3)::before {
  border-color: var(--line-color3);
}

.chart-wrapper .chart-x li:nth-child(4)::before {
  border-color: var(--line-color4);
}

.chart-wrapper .chart-x li:nth-child(5)::before {
  border-color: var(--line-color5);
}

Animate the Items

As soon as the page loads, the height of the list items will be animated and receive a value that’ll be determined by the associated funding value (see table above). For example, a value of 15,000 corresponds to height: 15%. Besides the list items, their ::before pseudo-element will be animated as well, though the animations won’t run simultaneously. The item will become visible first, then its pseudo-element.

Let’s now turn all the requirements above into code.

When the page loads, we’ll first add the loaded class to the body:

1	window.addEventListener("load", () => {
2	document.body.classList.add("loaded");
3	});

At that point the items can be animated sequentially. To achieve this, we’ll take advantage of a technique used in my previous chart demos. We’ll define two CSS variables that determine the transition speed (feel free to change them if needed) and we’ll combine them with the calc() function.

Here are the CSS styles responsible for revealing the x-axis items:

/*CUSTOM VARIABLES HERE*/

.loaded .chart-wrapper .chart-x li:nth-child(1) {
  height: 15%; /*represents €15,000*/
  transition-delay: var(--transition-delay);
}

.loaded .chart-wrapper .chart-x li:nth-child(2) {
  height: 35%;  /*represents €35,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(3) {
  height: 50%;  /*represents €50,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(4) {
  height: 72%;  /*represents €72,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(5) {
  height: 95%;  /*represents €95,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

As already mentioned in previous chart demos, Microsoft Edge doesn’t support these math operations, so if you need to support it, you’ll have to pass some static values instead, like this:

.loaded .chart-wrapper .chart-x li:nth-child(2) {
  height: 15%;
  transition-delay: 1.2s;
}

.loaded .chart-wrapper .chart-x li:nth-child(3) {
  height: 35%;
  transition-delay: 1.8s;
}

Note: I could have defined the transition-delay property outside the loaded class like this:

1	.chart-wrapper .chart-x li:nth-child(1) {
2	transition-delay: var(--transition-delay);
3	}

In either case, the result will be the same; the animation won’t run until the page loads. I only chose to include that property within the loaded class because I wanted to limit the CSS code and group the properties that share the same selector, for example those two:

.loaded .chart-wrapper .chart-x li:nth-child(1) {
  height: 15%; /*represents €15,000*/
}

.chart-wrapper .chart-x li:nth-child(1) {
  transition-delay: var(--transition-delay);
}

As already discussed in previous steps, the ::before pseudo-element should also appear on page load:

1	.loaded .chart-wrapper .chart-x li::before {
2	opacity: 1;
3	}

But with an even bigger delay:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li:nth-child(1)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.chart-wrapper .chart-x li:nth-child(2)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.chart-wrapper .chart-x li:nth-child(3)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  ); 
}

.chart-wrapper .chart-x li:nth-child(4)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

.chart-wrapper .chart-x li:nth-child(5)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 5
  );
}

The labels

The third list which includes the table data will be hidden by default.

But at the moment the chart animations finish, it will appear:

.chart-wrapper .chart-labels {
  opacity: 0;
  transition: opacity .6s 3.8s; 
}

.loaded .chart-wrapper .chart-labels {
  opacity: 1;
}

Notice the value of the transition-delay property which is set to 3.8s. We’ll use this value because the transition-delay property of the last ::before element of the x-axis is set to 3.6s:

The transition-delay property of the last before element of the x-axis

Finally, we’ll use the ::before pseudo-element of its list items to create the colorful rectangle which appears in the left corner of each item:

Here are the styles needed for that:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-labels li::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.chart-wrapper .chart-labels li:nth-child(1)::before {
  background: var(--line-color5);
}

.chart-wrapper .chart-labels li:nth-child(2)::before {
  background: var(--line-color4);
}

.chart-wrapper .chart-labels li:nth-child(3)::before {
  background: var(--line-color3);
}

.chart-wrapper .chart-labels li:nth-child(4)::before {
  background: var(--line-color2);
}

.chart-wrapper .chart-labels li:nth-child(5)::before {
  background: var(--line-color1);
}

Our final project looks like this!