Open In App

How to create a Pie Chart using HTML & CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

A Pie Chart is a type of graph that displays data in a circular shape and is generally used to show percentage or proportional data. The percentage represented in the graph by each category is provided near the corresponding slice of one portion of the pie chart. These charts are very good for displaying data for two or more categories.

Approach

  • Define a <div> element with a class name to represent the pie chart container.
  • Set the width, height, and border-radius properties to create a circular shape for the pie chart.
  • Use the conic-gradient() function in the CSS background-image property to define the colors and angles for each segment of the pie chart.
  • Specify the colors and angles for each segment of the pie chart within the conic-gradient() function.
  • 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.

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:

PieChart

Pie Chart using HTML & CSS Example output



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads