How to create a Pie Chart using HTML & CSS ?

Last Updated : 28 Jun, 2025

A Pie Chart is a circular graph that shows data as percentages of a whole, with each slice representing a category. For example, Education 40%, Healthcare 30%, Transportation 20%, and Others 10%. It’s ideal for visualizing and comparing parts of a whole in a clear, simple way.

piechartusing-html-css-javascript — Pie Chart using HTML CSS and Javascript

If you want to learn Web Development checl out our Tutorial - Web Development

Step by Step guide on How to create a Pie Chart

Step 1: Define a <div> element with a class name to represent the pie chart container.
Step 2: Set the width, height, and border-radius properties to create a circular shape for the pie chart.
Step 3: Use the conic-gradient() function in the CSS background-image property to define the colors and angles for each segment of the pie chart.
Step 4: Specify the colors and angles for each segment of the pie chart within the conic-gradient() function.
Step 5: Adjust the colors, angles, and dimensions as needed to customize the appearance of the pie chart according to the data being represented.

Example: In this example, we will design a pie chart using HTML and CSS.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Pie Chart</title>
        <style>
            .piechart {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background-image: conic-gradient(
                    pink 70deg,
                    lightblue 0 235deg,
                    orange 0
                );
            }
        </style>
    </head>
    <body>
        <h3>Pie Chart</h3>
        <div class="piechart"></div>
    </body>
</html>

Output

Example 2: In this example, we will design Advanced Pie chart using HTML and CSS.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pie Chart with HTML & CSS</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px;
      background: #f0f0f0;
    }
    .chart-container {
      position: relative;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background: conic-gradient(
        #4CAF50 0% 60%,     /* Chrome */
        #2196F3 60% 80%,    /* Firefox */
        #FFC107 80% 90%,    /* Edge */
        #9C27B0 90% 100%    /* Safari */
      );
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }
    .center-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 18px;
      box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
    }

    .legend {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .legend-color {
      width: 20px;
      height: 20px;
      border-radius: 4px;
    }
    .chrome { background: #4CAF50; }
    .firefox { background: #2196F3; }
    .edge { background: #FFC107; }
    .safari { background: #9C27B0; }
  </style>
</head>
<body>

  <h2>Web Browser Usage</h2>

  <div class="chart-container">
    <div class="center-label">100%</div>
  </div>

  <div class="legend">
    <div class="legend-item"><div class="legend-color chrome"></div> Chrome - 60%</div>
    <div class="legend-item"><div class="legend-color firefox"></div> Firefox - 20%</div>
    <div class="legend-item"><div class="legend-color edge"></div> Edge - 10%</div>
    <div class="legend-item"><div class="legend-color safari"></div> Safari - 10%</div>
  </div>
</body>
</html>

Output

How to create a Line Chart With CSS ?

nehaahlawat

Improve

Article Tags :

How to create a Pie Chart using HTML & CSS ?

Step by Step guide on How to create a Pie Chart

Similar Reads

Thank You!

What kind of Experience do you want to share?