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

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

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

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

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

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 might not work in all browsers, including IE11 and older. So if browser support is a concern you’ll either have to manually calculate the percentage (in this case the value would be 10.99), or if you have multiple pie charts on the page, you can use JavaScript to do that math for you.

Clean Up The Code

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!