Responsive CSS animated pie chart

Responsive CSS animated pie chart tutorial

Steve Cartwright Web Design 0 Comments

How to create a responsive CSS and HTML 3D animated infographic pie chart

To achieve the animated pie chart in this CSS infographic tutorial involves some thoughtful image creation along with some CSS positioning elements and transitions to show the movement and apparent 3d perspective.

Firstly it’s best to start with the image creation. There should be four separate images created. For this example I used percentage sizes for the flat top area (90% shown in dark green) and the sides (10% shown in red).

This will enable us to initially hide the red side section with some CSS background positioning to move the image towards the centre of the pie chart. We will then create a :hover elements to show the entire image with a transition to show some movement rather than a single jump from one position to the next.

In order to keep the proportions I’ve used a small fix to retain these while keeping the elements responsive rather than fixed width. This is done by creating a square transparent image to insert into the divs which is set to take up 100% of the space. This is to give you full control over the aspect ratio on a responsive site.

So to begin, I’ll talk you through the way to implement these on your site.
I’ll show the HTML and then highlight the corresponding CSS with a brief description of the elements used.

The final result of the responsive CSS animated pie chart tutorial is shown below.

Responsive CSS pie chart tutorial segment 1
Responsive CSS animated pie chart tutorial segment 2
CSS and HTML pie chart segment 3
Responsive CSS pie chart segment 4

Step 1:

HTML:

<div id="pie">
<div class="first">
<img src="images/square-spacer.png"/>
</div>

The div id called ‘pie’ is created to control the bounding box or container for a single segment or quarter of the pie chart. It is only used to reference the rules to be called later. The class ‘first’ is created for the first segment, the others will follow in order, i.e. second, third and fourth.

The image placed into the ‘first’ div should be a transparent .png file with the same aspect ratio you want the final div to retain. In this case a 1×1 pixel transparent .png file to create a square shape.

All size information for width or height should be removed from the image’s HTML code.

CSS:

#pie img {
width: 100%;
}

#pie .first {
background-size: 99% 99%;
background-repeat: no-repeat;
float: left;
width: 50%;
} 

The css above shows the setup to keep the transparent image full width and height and how to setup the initial state of the first segment.

‘#pie img’ – this calls the div ‘pie’ and then tells the css what to do if an image (img) is inserted into it.

All you have to do is set the width element to 100% and the height will be set because images will retain their aspect ratio.

The ‘#pie .first’ element is a little more involved so I’ll go through each element individually.

background-size: this is set to 99% for both width and height to allow it to take up most of the container’s area.
background-repeat: This is to ensure that the background does not tile itself and fill all the area when it is offset.
float:left – This makes sure that each segment fits snugly next to the last one and wraps the lower third and fourth divs into place as well.
width: when set to 50% it will always take up half the containers width. Because we want 4 equal parts in 2 columns 50% is the ideal figure to use.

Step 2:

The next part of this tutorial is showing you how to create the rollover 3d effect.
This is done by first placing and positioning the background so that it only shows the green elements with a sliver of red to separate the 4 segments. Then creating a ‘:hover‘ css element, to move the full background image with the red edge into view to give the impression that the block is rising into place.

CSS:

#pie .first {
background-image: url(images/one.png);
background-position: 520% 520%;
}

#pie .first:hover {
background-size: 100% 100%;
}

background image: this will be a link to where your background image is stored.
background-position: 520% 520%; – positions the image so that only the green area shows and the red is hidden. If varying the size of your background images you may have to experiment with your figures to get them just right. The green section takes up 90% of the image area while 10% is taken up by the red on this example.
Once those elements are in place you then have to create the :hover effect, which is pretty straight forward. Use background-size: 100% 100% to simply make the entire background image show in the entire available space.

Step 3:

The next thing to do is to add some animation to make the movement of elements smoother.
You will need to edit the CSS code we have already created by adding the transition rule:

CSS:

#pie .first {
background-size: 99% 99%;
background-repeat: no-repeat;
float: left;
width: 50%;
transition: all 0.8s ease 0.3s;
}

#pie .first:hover {
background-size: 100% 100%;
transition: all 0.3s ease 0s;
  }

You can play around with the figures in the transition CSS line to produce faster or slower animations with longer or shorter delays to customise your pie chart further.

Step 4:

Now that we have created the first segment of our pie chart we can now use the same methods to create the remaining three.

The changes necessary to get these working correctly are: the custom link and positioning of the background elements.

See the code below for all four segments:

HTML:

<div id="pie">
<div class="first">
<img src="images/square-spacer.png"/>
</div>
<div class="second"> 
<img src="images/square-spacer.png"/>
</div>
<div class="third">
<img src="images/square-spacer.png"/> 
</div>
<div class="fourth"> 
<img src="images/square-spacer.png"/> 
</div>
</div>

In the HTML above all the new segments are placed into the parent div called ‘pie’ so that they inherit the same necessary styles.

CSS:

#pie .first {
background-image: url(images/one.png);
background-position: 520% 520%;
}

#pie .second {
background-image: url(images/two.png);
background-position: -520% 520%;
}

#pie .third {
background-image: url(images/three.png);
background-position: 520% -520%;
}

#pie .fourth {
background-image: url(images/four.png);
background-position: -520% -520%;
}

Did you notice that the positioning follows a particular order depending on where each section is shown on screen?

i.e. ‘.second’ uses a position of -520% 520%. This means that the background image should be positioned to the left rather than the right of the container. While .three and .four are positioned into the top of the container rather the bottom.

You may also notice that I reduced the amount of CSS included in each segment. This is because I planned to minimise the file size and make future edits easier by combining any repeated code into one rule. These combined rules are shown below:

CSS:

#pie .first, #pie .second, #pie .third, #pie .fourth {
background-size: 99% 99%;
background-repeat: no-repeat;
float: left;
width: 50%;
transition: all 0.8s ease 0.3s;
}

#pie .first:hover, #pie .second:hover, #pie .third:hover, #pie .fourth:hover {
background-size: 100% 100%;
transition: all 0.3s ease 0s;
}

So you should have ended up with code that looks similar to the following:

HTML:

<div id="pie">
<div class="first">
<img src="images/square-spacer.png"/>
</div>
<div class="second"> 
<img src="images/square-spacer.png"/>
</div>
<div class="third">
<img src="images/square-spacer.png"/> 
</div>
<div class="fourth"> 
<img src="images/square-spacer.png"/> 
</div>
</div>
CSS:

#pie img {
width: 100%;
}
#pie .first, #pie .second, #pie .third, #pie .fourth {
background-size: 99% 99%;
background-repeat: no-repeat;
transition: all 0.8s ease 0.3s;
float: left;
width: 50%;
}
#pie .first {
background-image: url(images/one.png);
background-position: 520% 520%;
}
#pie .second {
background-image: url(images/two.png);
background-position: -520% 520%;
}
#pie .third {
background-image: url(images/three.png);
background-position: 520% -520%;
}
#pie .fourth {
background-image: url(images/four.png);
background-position: -520% -520%;
}
#pie .first:hover, #pie .second:hover, #pie .third:hover, #pie .fourth:hover {
background-size: 100% 100%;
transition: all 0.3s ease 0s;
}

Additional information:

There are restrictions as to how this animates on mobile devices as there is currently no :hover function supported on phones (you are either clicking or not). To enable animation for mobile devices you have the option of adding ‘:focus’ in conjunction with your ‘:hover’ elements. Note: This only works if you do not have a link associated with the segments.

You can also add links to your spacer images in order to have each segment link to a particular url.

This code can be customised to do much more so please experiment to make it your own. If you would like to see the animated pie chart in use on a webpage visit here.

Related links
For more information on infographics involving javascript read here.
For more tips and guidance on creating interactive infographics click here.
Responsive CSS animated pie chart tutorial was last modified: November 17th, 2014 by Steve Cartwright

Leave a Reply

Your email address will not be published. Required fields are marked *