Pie charts can be created using the CSS conic-gradient() function. This creates an image gradient which can then be placed as the background of the container.
CSS conic-gradient()
CSS conic-gradient() creates an image gradient with various color stops placed around the circumference of a circle.
/* red : 0 deg to 120 deg */
/* orange : 120 deg to 240 deg */
/* yellow : 240 deg to 360 deg */
div {
background: conic-gradient(red 0deg 120deg, orange 120deg 240deg, yellow 240deg 360deg);
}
- There are 360 degrees in a circle.
- By default the starting point of the gradient is 12:00 PM north (0 degrees).
- Multiple color stops can be given. Each color stop can be given by the syntax color-code start-angle end-angle
conic-gradient() has more customization options, however this information is enough in order to create a pie chart .
Example 1 - Pie Chart with 3 Sections
<div class="pie-chart"></div>
<style>
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red 0deg 120deg, orange 120deg 240deg, yellow 240deg 360deg);
}
</style>
Example 2 - Pie Chart with 4 Sections
<div class="pie-chart"></div>
<style>
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red 0deg 90deg, orange 90deg 180deg, yellow 180deg 270deg, green 270deg 360deg);
}
</style>
Example 3 - Pie Chart with 3 Sections, Different Start Point
The default start point of the gradient is 0deg. However this can be changed by specifying the initial start angle.
/* start from 45 degrees */
div {
background: conic-gradient(from 45deg, red 0deg 120deg, orange 120deg 240deg, yellow 240deg 360deg);
}
Note that the start angle will just set the initial position of the circle. Color stops can still be provided till 360 degrees.
<div class="pie-chart"></div>
<style>
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(from 45deg, red 0deg 120deg, orange 120deg 240deg, yellow 240deg 360deg);
}
</style>
Browser Compatibility
conic-gradient() is supported in all browsers — Firefox, Chrome, Edge & Safari.