How to Create an SVG Pie Chart—Code Along with Kasey (Video)

05-06-19 Kasey Bonifacio

Need some help coding an SVG pie chart? Pair up with Kasey as she teaches you how to step by step.

I needed to build an SVG pie chart and found some great examples of pie charts, but it took a while for me to decipher what exactly was going on in each example. Below, I’m going to break down, step by step, how to understand and build your own SVG pie chart.

Create the SVG

See the Pen SVG Pie Chart - Step 1: Create and SVG by Kasey Bonifacio (@kaseybon) on CodePen.

What We Did

  1. Create an SVG element to work with.
  2. Set both the height and width to 20px (20 pixels). This gives us a small image, but we can always scale it up with CSS.
  3. Define the viewBox (understanding viewBox) so that viewable area covers the entire SVG.

Add Some Circles

See the Pen SVG Pie Chart - Step 2: Add Some Circles by Kasey Bonifacio (@kaseybon) on CodePen.

What We Did

  1. Add a circle (mdn.io/circle) element for the background of the pie chart.
  2. Circle elements need a radius, or r, attribute to define the width of the circle. You can position them along the X and Y axis by setting the cx and cy attributes respectively.
  3. Clone the background circle. This second circle becomes the pie slice, and we’ll temporarily set the fill color to bisque so we can see what we’re doing.

From Border to Wedge

See the Pen SVG Pie Chart - Step 3: From Border to Wedge by Kasey Bonifacio (@kaseybon) on CodePen.

What We Did

  1. Add a tomato colored stroke (mdn.io/stroke) to the image.
  2. Since the width of the stroke is centered on the edge of the circle, we resize the bisque circle to be half the size of the background.
  3. Create wedge shapes by setting the stroke-dasharray (mdn.io/stroke-dasharray). Wedges will be 1 pixel wide with 3 pixels of space between them.
  4. Set the stroke-width (mdn.io/stroke-width) to be equal to the radius of the background circle (10px) so that it extends from the center of the circle to the edge.

Do Some Math

See the Pen SVG Pie Chart - Step 4: Do Some Math by Kasey Bonifacio (@kaseybon) on CodePen.

What We Did

  1. Set the stroke-dasharray gap to the circumference of the bisque circle to ensure only one wedge is visible.
  2. Use the CSS calc() (mdn.io/calc) function to convert the number for the wedge width into a percentage.

It’s important to note that using the calc function like this will not work in IE 11 and older. So if those are browsers you have to support, you’ll either have to manually calculate the percentage, or if you have multiple pie charts on the page, you can use JavaScript to do that math for you.

Clean Up The Code

See the Pen SVG Pie Chart - Step 5: Clean Up the Code by Kasey Bonifacio (@kaseybon) on CodePen.

What We Did

  1. Set the fill color of the bisque circle to transparent so the base circle is no longer visible.
  2. Use the transform (mdn.io/svg/transform) attribute and the rotate() function to rotate the pie wedge -90 degrees so that it starts at the top of the circle.
  3. Use the translate() function to pull the wedge back down -20 pixels (the height of the SVG) after the circle rotates out of view.

And there you have a basic SVG pie chart. With a little bit of imagination and some CSS and Javascript, you can build upon the example above to create donut charts, animated charts, and interactive charts. Happy coding!