3 pie chart designs created using only HTML/CSS
We have put together a pie chart snippet that can be implemented using only HTML and CSS. All can be easily used by copying and pasting without using a Java Script library.
Simple PieChart
Standard
Adjust design
A pie chart that can be drawn with a single CSS property called "conic-gradient". The feature is that it is easy to create without even using SVG from JS.
Copy HTML
<div class="pie-chart-1">
<span>60%</span>
</div>
Copy CSS
.pie-chart-1 {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-image: conic-gradient(#2589d0 60%, #f2f2f2 60% 100%);
}
.pie-chart-1 span {
position: absolute;
top: 50%;
right: 25%;
transform: translate(50%, -50%);
color: #fff;
font-weight: 600;
font-size: 1.1em;
}
2 items
Adjust design
A pie chart that allows you to set two items. The legends on the right make each item easier to understand, but it's up to you to decide whether to include them or not.
Copy HTML
<div class="pie-chart-3">
<div></div>
<ol>
<li><span>項目1</span>70%</li>
<li><span>項目2</span>20%</li>
</ol>
</div>
Copy CSS
.pie-chart-3 {
display: flex;
justify-content: center;
align-items: center;
}
.pie-chart-3 > div {
width: 200px;
height: 200px;
margin: 0;
border-radius: 50%;
background-image: conic-gradient(#2589d0 70%, #5ba9f7 70% 90%, #f2f2f2 90% 100%);
}
.pie-chart-3 li {
display: flex;
list-style-type: none;
align-items: center;
font-size: .8em;
}
.pie-chart-3 li::before {
display: inline-block;
width: 1.2em;
height: .8em;
margin-right: 5px;
content: '';
}
.pie-chart-3 li:nth-child(1)::before {
background-color: #2589d0;
}
.pie-chart-3 li:nth-child(2)::before {
background-color: #5ba9f7;
}
.pie-chart-3 span {
margin-right: 10px;
font-weight: 600;
}
Donut PieChart
Standard
Adjust design
A pie chart with a hole in the middle, like a donut. Recommended if you want not only the graph but also the text to stand out.
Copy HTML
<div class="pie-chart-2">円グラフの例</div>
Copy CSS
.pie-chart-2 {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-image: radial-gradient(#fff 55%, transparent 55%), conic-gradient(#2589d0 60%, #f2f2f2 60% 100%);
font-weight: 600;
}