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

  • Pepperoni
  • Sausage
  • Cheese
  • Mushrooms
  • Chicken
  • Other

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:

<link href="path/to/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path/to/snap.svg.js"></script>
<script src="path/to/pizza.js"></script>

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.

<ul data-pie-id="pizza">
  <li data-value="36">Pepperoni</li>
  <li data-value="14">Sausage</li>
  <li data-value="8">Cheese</li>
  <li data-value="11">Mushrooms</li>
  <li data-value="7">Chicken</li>
  <li data-value="24">Other</li>
</ul>

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.

<div class="row">
  <ul data-pie-id="pizza">
    <li data-value="36">Pepperoni</li>
    <li data-value="14">Sausage</li>
    <li data-value="8">Cheese</li>
    <li data-value="11">Mushrooms</li>
    <li data-value="7">Chicken</li>
    <li data-value="24">Other</li>
  </ul>
  <div id="pizza"></div>
</div>

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:

<script>
  Pizza.init();
</script>

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:

<script>
  Pizza.init(
    document.body, {donut: true, percent_offset: -20}
  );
</script>

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.

JavaScriptRWDSASS

  • ConAntonakos

    Geoff, thank you so much for this tutorial!

    I do have a question for you about manipulating the pie chart. I’m not particularly knowledgeable regarding SVGs, so I’m having a hard time containing the SVG pie chart within the limits of, let’s say, a particular ‘div’. For example, I want it to fit in a ‘div’ of my choosing, but it’s not working for me. The parent ‘div’ is positioned relatively, and I’m trying to fit the pie chart in it.

    I’m not currently using Zurb’s Foundation framework, nor is my site particular responsive at the moment.

    Any advice? Thanks for your time!

    • Good question!

      I think you can make that happen by styling it directly in your CSS. For example:

      .your-parent-class svg {
      width: 100% /* Adjust to fit the space */
      height: auto;
      }

      The beauty of this plugin is that it’s basically an unordered list that can be plopped in just about anywhere. Check your parent div as well to be sure the pie chart is not inheriting some of its styles, particularly for other unordered lists.

      Hope this helps!

      • ConAntonakos

        Thank you, Geoff. I’ll try it out. :)

  • Donovan

    hi geoff, thanks for the crisps run through of pie-charts. i just wonder besides pie charts, will it be able to do any other form of charting? such as line graphs, bar charts etc?

  • dddddd

    where are the sample results? On some other website?

  • Hitesh Choubisa

    Hi geoff, I am trying to show 0, 100 value in pizza pie chart but its not showing.

    • sanjay

      same issue facing me now ?
      u got any solution yet ?

Subscribe to Devigner Digest

I read a lot of crap about design and development and 90% really is crap. Subscribe and I will send links to the other 10% about once a month.