Creating Responsive CSS Pie Charts

We’re going to learn how to make a CSS pie chart in this post using the Pizza Pie Charts add-on Zurb created for its Foundation framework.

I have tutorials for creating responsive CSS bar charts and CSS bar charts using HTML5 progress, so be sure to check those out if you’re looking bar graphs. In this tutorial, I’m going to walk through how to make simple, responsive pie charts using a tool developed by Zurb.

What makes this so great? These pie charts are a lightweight cocktail of CSS and Javascript and use SVG, meaning they scale to any size without losing any resolution. And, since they are responsive, they are perfect for visualizing data in a way that translates well for any browser size. Plus, I don’t know if you’ve ever tried building your own CSS pie charts before, but it’s a beast. This is easy as, well, pie.

Here is what we will be creating

Getting Started

You will need to download and install Zurb Foundation to get started. It’s a pretty simple process if you haven’t installed it before, but is outside the scope of this post. Here’s the documentation to get you going. Set up your new project and you’re good to go.

You can do this without Foundation, but I will write this as if you are using it. The only difference is that Foundation provides some layout options that are baked right into their framework that I will be using in this example. If you roll with your grid, then no a big deal, but I wanted to point that out.

Secondly, you will need to download Pizza Pie Charts. Open the package, drop the CSS and JS files in your directory where you normally store CSS and JS files, then make sure you reference them in your document head. That might look something like this:

Note that Pizza Pie Charts requires jQuery, so be sure to reference that if you don’t already.

If you’re like me, I use SASS to write my CSS. Fortunately, Zurb made Pizza Pie Charts super SASS-friendly. I have my own SASS filing system, so I was able to drop the pizza.scss file into my SASS directory and start using it right away without having to add the CSS link to document head like the example above.

Set up the HTML

The beautiful thing about these CSS pie charts is that they use semantic HTML. What does that mean? Basically, all you need to do is write standard HTML markup for an unordered list and Pizza Pie Chart does the rest.

  
Pepperoni
  
Sausage
  
Cheese
  
Mushrooms
  
Chicken
  
Other

Note that “pizza” is just my naming convention. You can name this whatever you want, but make sure you use it consistently in the next steps. The data values correspond to the size each ingredient takes up in the pie. The larger the value, the bigger the slice. Just make sure they add up to 100.

Add the Divs

Pizza Pie Charts only requires a single div to work. However, I found that if you want your legend to display on one side of the chart instead of stack on top of it, then you need to add a little more markup. It’s not much, but is necessary to make it work.

  

    
Pepperoni
    
Sausage
    
Cheese
    
Mushrooms
    
Chicken
    
Other
  
  

The required portion is the div that contains the “pizza” ID. The row class will come into play in a couple of steps.

Initialize the Javascript

At its most basic, these CSS pie charts only require a single line of Javascript to work. Add this anywhere in your body:

There are a host of different options you can add to this snippet to customize the pie charts.

{
  donut: false,             // show hole in the center
  donut_inner_ratio: 0.4,   // between 0 and 1
  percent_offset: 30,       // relative to radius
  stroke_color: '#333',
  stroke_width: 0,
  show_percent: true,       // show or hide the 
                            // percentage on the chart.
  animation_speed: 500,
  animation_type: 'elastic' // backin, backout, 
                            // bounce, easein, 
                            // easeinout, easeout,
                            // linear
}

For this example, here is the code I will be using:

In short, this turns the chart from a pie into a donut and moves the percent labels closer to the chart.

Style the Charts in CSS

Now that the HTML and Javascript are completely set up, we can start styling our chart. Notice that we have three elements to play with:

• .row
• ul[data-pie-id=”pizza”]
• #pizza

I always want my legend on the left and my chart on the right. By wrapping our chart in the “row” class, we are using a built-in Foundation component that tells the code that the things inside of it all belong on the same row. If you use SASS, you can use @include to create your own class, or just use this one out of the box. It’s your choice.

Next, go into the pizza.scss file and add these lines to the end:

ul[data-pie-id] {
  list-style: none;
  padding: 10px;
  @include grid-column(4);
}

#pizza { @include grid-column(8); }

We have just told the code to push the legend to the left using four columns in the row and the chart to the right using eight columns in the row. Yes, you can wrap the HTML in those divs, but I tend to favor less divs than more, so this is the way I suggest going about it.

If you use your own grid instead of Foundation, you can replace those @includes with your own column mixin.

Conclusion

That’s it! With a few new files, several lines of HTML and a couple lines of SASS, you can create CSS pie charts that can be used anywhere on your site. No Photoshop or Illustrator. No crazy Javascript wrangling.