Kasey here with Sparkbox. And today I'm
going to show you how I code an SVG pie
chart from start to finish. I'm going to
be working in Codepen, and I want
to keep my SVG completely contained
to the HTML. But I do have a little bit
of CSS on the page just to make things
look nicer. Now the first thing we need
to do is add an SVG element to the page.
So we add our opening and closing tags, and
then we give this SVG a few attributes.
First thing, we want to set the height
for it to 20 pixels and the width also
to 20 pixels. Next, we need to define the
viewable area of the SVG which is the
view box attribute. The view box takes
four numbers. The first two are going to
be the x and y coordinates of the upper
left corner which is 0 0. And the next
two are going to be the x and y
coordinates at the lower right corner
which in our case are going to be 20 20.
Now, our SVG is a little bit on the small
side since we set it to 20 pixels by 20
pixels, so we'll use a little bit of CSS
just to scale it up to 500 by 500. That will
let us see what we're doing. Since the
SVG is a vector element we can scale it
to whatever size we want without losing
any image quality. Next, we want to add a
circle for the background of our pie
chart. The circle element is a self
closing tag and the first piece of
information we need to pass is the
radius, which is the R attribute. We want
the circle to fill the entire view box,
so it's going to need to be half of the
width of the SVG. So we'll set it to 10.
You'll notice that the circle is off in
the upper left corner with most of the
circle out of the view box. This is
because by default the center of the
circle is positioned at the 0 0, X Y
coordinates. In order to move the circle
we can reposition it by you setting cx
and cy attributes. The cx attribute is
going to move the circle along the x-axis, and the cy is going to move it
along the y-axis. Now that our circle is
the correct size and centered, we need to
set the fill color to white.
For the slice of the pie chart, we're
going to be using a second circle
element. And we're going to be
manipulating the attributes on that
element in order to create our little
pie wedge. To start, we'll copy and paste
the background circle. And then so we can see what we're doing, we'll temporarily
update the fill color to bisque.
In order to create the pie slice shape,
we're going to add a border around the
bisque circle. The border on an SVG element is called a stroke, and we add this by
giving the stroke attribute a color. Once
we do this, we get a default one pixel
border around the circumference of the
circle. Remember that our original SVG is
20 pixels by 20 pixels and we're scaling
the image up, so this border is going to
look much larger than one pixel wide. If
we were to knock the size back a bit
though, it would look more like a one
pixel border. You also notice that some
of the stroke is being clipped by the
edges of the SVG. When we add a stroke to
an SVG element, the width of the stroke
is going to be centered along the
perimeter of the element. Half of the
stroke is going to be on the inside and
the other half is going to be on the
outside of the circle. We're going to
play around with the stroke to create
the pie slice, and in order to keep the
stroke from being clipped, we need to
resize our bisque circle to be half the
size of the background circle. This will
allow us to enlarge the size of the
stroke while also keeping it all within
the view box. When setting a border in
CSS, we're able to specify the style of
border we want. For instance, we have a
dashed border around the perimeter of
the SVG itself. We can do something
similar with the SVG stroke by setting a
stroke-array attribute. If we give the
stroke-array a value of one, we're
going to be given a dashed line effect
with one pixel long dashes each with a
one pixel gap in between. We can add a
second value to the stroke-array in
order to increase the gap between each dash.
If we set the second value to three, we
wind up with a three pixel gap between
each dash. At this point, let's revisit the
size of the stroke. Remember, we're given
a default one pixel wide stroke, but we
can update the stroke width and set it
to 4. This gives us two pixels of border
on the inside of the bisque circle and
two pixels on the outside. And here you
can start to see a triangular wedge
shape forming. If we increase the stroke with a bit
more to be the same size as the radius
of the background circle, which is 10, we
wind up with a beach fall effect where
we have multiple wedges that extend from
the center of the background circle all
the way to the edges. We only need one of
these wedges for our pie slice, so we
want to increase the spacing in between
each wedge so that we only ever see the
one. We can do this by setting the
stroke-array or a gap to be equal to the
circumference of the bisque circle. We'll
need to use a little bit of high school
math, so if you don't remember it's 2
times pi times the radius. Or we can use
this Google calculator, and we just enter
in our radius which was 5 and we're
given the circumference 31.42. When we
add this to our SVG, we're left with a
single pie wedge so we can start playing
around with the size of the pie
slice. We can increase the size of the
slice to 10, and we're going to get a
much larger wedge. But when we're working
with a pie chart, we're usually working
with percentages, and I want this 10 to
represent 10%. But as you can see it's
much larger than 10% of the pie. We'll
need to do a little bit more math, and
this time we're going to do all the math
in the SVG using the CSS calc function.
To calculate the correct percentage,
we'll take our 10% times the
circumference, and then we'll divide that
number by 100 in order to get our final
percentage. Now we have a slice that
looks much more like 10%. We can double
check this by updating our percentage to
50, and our pie slice takes up exactly
half of the chart, and then we can update
it again for 35%. Now we have a pie chart, but we need to
clean up the code a bit. The first thing
we need to adjust is the starting point
of the pie slice. Normally when we see a
pie chart, the slices start at the top of
the circle, but ours is starting down in
the middle. We can fix this by rotating
the circle element -90 degrees using
the transform attribute and the rotate
function. The transform attribute is
similar to the CSS transform property
with some slight syntax differences.
Unfortunately once we rotate our pie
slice, it is no longer visible in the
view box. This is because circle elements
don't rotate on the center of the circle,
but instead in the upper left corner. If
we adjust the degrees rotated
incrementally you can see how the circle
starts to rotate out of view.
We can fix this by also passing the
translate function to pull the element
down -20 pixels.
Next, we no longer need the bisque fill
color for the circle that positions the
pie slice. We can either set the fill to
white to match the background circle or
we can set it to transparent. And lastly,
we no longer need the border around the
SVG, so we can remove that style from the CSS. And there you have it a completed
SVG pie chart. It's important to note
that using the calc function like we are
isn't going to work in IE 11 and older,
so if these are browsers that you need to
support, you'll have to either do them
math yourself or write some JavaScript
to do it for you. Be sure to check out
the description for a link to the
accompanying article with code snippets
and links to more resources. Happy coding.
