Building a Pie Chart with HTML and CSS
Creating a pie chart using only HTML and CSS can be a great way to display data on the web, especially for light projects where performance is not a primary concern. In this tutorial, we will build a simple pie chart that displays the percentage of food consumed in a city.
First, let’s start with the basic HTML structure:
“`html
“`
Next, let’s add some basic styles to our CSS file:
“`css
.pie-wrap {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.key-wrap {
position: absolute;
top: 20px;
left: 20px;
}
“`
Now, let’s create the pie chart entries and add them to our HTML file:
“`html
“`
We’ll also add some styles to make our entries look like a pie chart:
“`css
.entry {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip-path: circle();
transition: transform 0.5s ease-in-out;
}
.entry:hover {
transform: scale(1.1);
}
“`
Next, let’s create the pie chart keys and add them to our HTML file:
“`html
“`
We’ll also add some styles to make our keys look nicer:
“`css
.key-wrap input[type=”radio”] {
display: none;
}
.key-wrap label {
display: inline-block;
margin-right: 10px;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
.key-wrap input[type=”radio”]:checked + label {
background-color: #ccc;
}
“`
Finally, let’s add some interactivity to our pie chart by making the keys display additional information when clicked:
“`html
“`
We’ll also add some styles to make our info sections look nicer:
“`css
.info {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
.key-wrap input[type=”radio”]:checked + label + .info {
display: block;
}
“`
And that’s it! Our pie chart is now interactive and displays additional information when a key is clicked.
I hope this helps! Let me know if you have any questions or need further clarification.