This content originally appeared on DEV Community and was authored by Carmine Scarpitta
You can create a Pie Chart in HTML using a simple CSS function called conic-gradient.
First, we add a <div> element to our HTML page, which acts as a placeholder for our pie chart.
<div id="my-pie-chart"></div>
We need to provide a width and a height to the <div> element, which determine the size of our pie chart:
#my-pie-chart {
height: 100px;
width: 100px;
}
Then, we need to make our pie chart circle-shaped by setting the border-radius value to 50%:
#my-pie-chart {
border-radius: 50%;
}
And finally we are ready to populate the pie chart with our data.
As an example, let's consider the world population data reported at the following link:
https://www.worldometers.info/geography/7-continents/
We want to show the population distribution per continent using our pie chart.
For each continent, we associate an arbitrary color and the population percentage taken from the above link. The data is summarized in the following table:
| Continent | Color | Population |
|---|---|---|
| Asia | red | 59.54% |
| Africa | orange | 17.20% |
| Europe | yellow | 9.59% |
| North America | green | 7.60% |
| South America | blue | 5.53% |
| Australia | black | 0.55% |
| Antarctica | brown | 0.00% |
To apply these values to our pie chart, we need to partition it into 7 sectors, a sector for each continent. To create the sectors, we can use the conic-gradient CSS function. Each sector has a color, a start position and a stop position.
For example, Antarctica is represented by the brown color and has 0.00% of the world population. Therefore, we want a brown sector from 0.00% to 0.00%.
Then, we want to plot a black sector representing the Australia, which has 0.55% of the world population. This results in a black sector going from 0.00% to 0.55%.
Similarly, to represent the South America we want a blue sector going from 0.55% to 6.08% (= 0.55% + 5.53%).
And so on.
We end with the following CSS background property:
#my-pie-chart {
background: conic-gradient(brown 0.00%, black 0.00% 0.55%, blue 0.55% 6.08%, green 6.08% 13.68%, yellow 13.68% 23.27%, orange 23.27% 40.47%, red 40.47%);
}
? That's all. Now we are able to create a pie chart in CSS.
This content originally appeared on DEV Community and was authored by Carmine Scarpitta
Carmine Scarpitta | Sciencx (2021-08-14T18:32:45+00:00) Build a simple Pie Chart with HTML and CSS. Retrieved from https://www.scien.cx/2021/08/14/build-a-simple-pie-chart-with-html-and-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.