Creating a pie chart in HTML can seem impossible, but it isn’t. We can create a pie chart using only HTML and CSS. By combining the clip and border-radius properties, we can use them to create the wedge shapes. So with a little bit of math, HTML, CSS, and under 10 minutes of your time, you can create a pie chart to represent your data.
- [Instructor] Hi, this is Chris Converse, and in this episode we'll create a pie chart using only HTML and CSS, by combining the clip and border radius properties, in order to create the wedge shapes. So, if you'd like to follow along with me, download the exercise files, and I'll begin by opening the HTML and CSS files in a text editor. Now for this project, we're going to set most of the CSS in a separate CSS file. In the HTML file, we're going to set a couple of properties that are going to relate specifically to the data. This way, if you want to change the data, you can change that information in the HTML and if you want to change the style, we can change it in the CSS.
Now, in my text editor, I have this set up to take up the left-hand side of the screen, with the top area showing the HTML and the bottom area showing the CSS. And on the right-hand side, I have the design, showing in a browser. And so, we're going to start by taking a look at some of the HTML that I've already set up. So we have a figure element within our body. Inside of the figure element, I have a div, with a class of pie chart, and inside of that div, I have another div with a class of base. So right now, I have instyled the appearance of that, so right now, we just see a blank box in the preview.
So over in the CSS, let's scroll down. At the very bottom, I have a selector that's targeting the div with the class of pie chart, up here. And the first thing I want to do is make all of the divs inside of the pie chart class into circles. So we'll start by typing ".piechart," then a space, then "div," put in our brackets. Inside, we're going to set a width property. We're going to set the width to inherit.
This way, the width of the divs will always conform to the size we set here in the piechart. So if we ever want to change the size, we only change it in one spot. Next, let's set a height property. We're going to set this to inherit as well. Down the next line, we're going to set a position property. We're going to set this to absolute. Next, we'll set a top property. Set that to 0 pixels. We'll also set a left property. We'll set that to 0 pixels.
And then finally, we'll set a border radius, and we're going to set that to 50%. So with those properties set up, we're going to scroll down a little bit. Now I'm going to target the div with the class of base. So we'll start with .piechart .base, put in our brackets and then we'll set a background color. We use the RGBA color space. Let's come in here and set 255 for red, comma, 255 for green, comma, 255 for blue, and then to make this semi-transparent, we'll set this to 0.3.
With those in place, save your CSS and we'll now see in the browser, we have a semi-transparent white circle. And now, to create our first wedge, we're going to need some additional divs in the HTML file. So up here in the HTML, after the div with the class of base, let's hit a Return. Let's add another div, then a space. We'll set a class of slice, then we'll end the div, and the element. Let's split this div open, and then inside of this div, we're going to add another div.
So beginning tag and then ending tag. And now as I mentioned before, we're going to want to set some of our CSS properties within the HTML file, so that we can change our content later, and one of those properties is going to be the color of the slices. So let's go back into the opening tag for the div we just created. Let's hit a space, let's add a style attribute. So, style equals, two quotes. Let's come in here and set a background color. So background-color:#fff, for white, and then a semi-colon.
Save your HTML and we'll now see in the browser that div element is a full white circle. So now let's conform this to a half circle so that we can create wedge shapes by adding some additional CSS properties in the CSS file. So back in our CSS file, let's type .piechart, then a space, then we'll target the slice class, so we'll type .slice, then a comma, we're going to add a second selector to this CSS rule. Then on the next line, we'll type .piechart again, then a space, .slice, then a space, then div, put in our curly brackets, let's split this open.
We're going to set a top property here of 0 pixels as well. Left property, 0 pixels. Then we're going to come down here and set a clip property. So we'll type clip, colon, space, then we'll type rectangle, and that's abbreviated as rect, put in our parentheses, then a semi-colon. Inside of the parentheses, we use short-hand style to clip our circle, so we'll start with 0 pixels, which is the top, then 90 pixels for the right, comma, space, 180 pixels for the bottom, comma, space, and then 0 pixels for the left.
So when you have those properties in place, save your CSS, go back to the browser and our full white circle is now being clipped into a half circle. So now, with our half circle in place, we're going to need to set up some rotation properties, using degrees to represent our data, and the first thing we'll need to do is figure out how many degrees of a circle represent our data, and we want this pie chart to represent 75%, so what we'll do is represent 75% as a decimal, which will be 0.75, then we'll multiply that by 360 degrees, giving us 270 degrees.
Now with this CSS technique of clipping a circle, the maximum size we can represent with each wedge is only 180 degrees, so what we'll need to do is use two wedges, one wedge at 180 degrees, and the other wedge at 90 degrees. So back in our text editor, let's first represent the 90 degree wedge so you can see how this effect is working. So back in our HTML, let's find the div that's inside of our div with a class of slice. After our background property inside of the style attribute, let's hit a space, and we're going to type transform, colon, space, then we'll type "rotate," set a parenthesis and a semi-colon.
Inside of the parenthesis for rotate, we're going to type 90 degrees, so "90deg". Hit Save in our HTML. We'll now see that the inner div is rotating 90 degrees, but the outer div is still clipping this within a half circle, and so now, we'll want to rotate this entire slice all the way around, so that this edge here starts at the 180 degree mark, so back to our HTML, let's find the div with the class of slice, let's hit a space, we'll add a style attribute, equals two quotes, type "transform," colon, space, "rotate," put in our parentheses and a semi-colon, and the rotation property here is going to be 270 degrees.
So "270deg," then hit Save. So now with our 90 degree wedge representing from 180 to 270 degrees, let's come back to our HTML, let's copy this entire slice, going to add this above the one we just created, and now on this first div with a class of slice, let's come in here and change the transform from 270 to 180 degrees and let's come in here to the div inside of the first class of slice and change the rotation to 0.
Save your HTML and now back in the browser, the first div is taking up the full half circle to represent 180 degrees, and then the second slice, representing 90 degrees, starts where the 180 degree slice ends, bringing us all the way around to 270 degrees. And now, by repeating this technique, you can represent any number of wedges in your pie chart, and now, if you'd like to dive a little deeper into this technique or see a more graphical explanation of how the CSS rotation and clipping properties are working, check out Pie Charts with CSS, which is also available here in the library, and so with that, I'll conclude this episode and as always, thanks for watching.
Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.