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:
Pie Chart using HTML & CSS Example output
Recommended Articles