Building a Pie Chart with HTML and CSS

Getting Started

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.

Basic HTML Structure

Let’s start with the basic HTML structure:

<div class="pie-wrap">
  <div class="key-wrap">
    
  </div>
</div>

Basic CSS Styles

Next, let’s add some basic styles to our CSS file:

.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;
}

Pie Chart Entries

Now, let’s create the pie chart entries and add them to our HTML file:

<div class="pie-wrap">
  <div class="key-wrap">
    <div class="entry" style="transform: rotate(60deg);">Rice</div>
    <div class="entry" style="transform: rotate(120deg);">Pasta</div>
    <div class="entry" style="transform: rotate(180deg);">Pizza</div>
    <div class="entry" style="transform: rotate(240deg);">Burger</div>
    <div class="entry" style="transform: rotate(300deg);">Salad</div>
    <div class="entry" style="transform: rotate(360deg);">Sandwich</div>
  </div>
</div>

We’ll also add some styles to make our entries look like a pie chart:

.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);
}

Pie Chart Keys

Next, let’s create the pie chart keys and add them to our HTML file:

<div class="pie-wrap">
  <div class="key-wrap">
    <input type="radio" id="rice" name="food"/>
    <label for="rice">Rice</label>
    <div class="info"><strong>40%</strong> of food consumed</div>

    <input type="radio" id="pasta" name="food"/>
    <label for="pasta">Pasta</label>
    <div class="info"><strong>30%</strong> of food consumed</div>

    <input type="radio" id="pizza" name="food"/>
    <label for="pizza">Pizza</label>
    <div class="info"><strong>15%</strong> of food consumed</div>

    <input type="radio" id="burger" name="food"/>
    <label for="burger">Burger</label>
    <div class="info"><strong>10%</strong> of food consumed</div>

    <input type="radio" id="salad" name="food"/>
    <label for="salad">Salad</label>
    <div class="info"><strong>5%</strong> of food consumed</div>

    <input type="radio" id="sandwich" name="food"/>
    <label for="sandwich">Sandwich</label>
    <div class="info"><strong>10%</strong> of food consumed</div>
  </div>
</div>

We’ll also add some styles to make our keys look nicer:

.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;
}

Interactivity

Finally, let’s add some interactivity to our pie chart by making the keys display additional information when clicked:

.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.