# Single Element Pie Chart (Circle Diagram) With CSS

Category: Chart & Graph , Javascript | May 6, 2022
Author: Mark Boots 112 views Go to website May 6, 2022 MIT

## Description:

A circle chart or pie chart is a circular statistic graph, which represents the proportions of a whole.

Using a single div and some CSS you can build circle diagrams representing percentage values. You can also optionally have smooth transitions by using JavaScript.

## How to use it:

1. Add the CSS class `circle-diagram` to a DIV element and define a number expressed as a fraction of 100 using the `--percent` variable as follows:

```<div class="circle-diagram" style="--percent: 12.5">12.5%</div>
<div class="circle-diagram" style="--percent: 50">59%</div>
<div class="circle-diagram" style="--percent: 75">75%</div>
<div class="circle-diagram" style="--percent: 100">100%</div>
...```

```.circle-diagram{
--degree: calc(360deg / 100 * var(--percent));
--hue: calc(360 / 100 * var(--percent));
--accent-color: hsl(var(--hue), 100%, 50%);
font-size: 1rem;
width: 100%;
max-width: 15rem;
aspect-ratio: 1;
position: relative;
filter: drop-shadow(0 0.5rem .5rem rgb(0 0 0 / .5));
display: grid;
place-items: center;
font-weight: 700;
font-family: system-ui, sans-serif;
color: var(--accent-color);
text-shadow: 0 0 5px rgb(0 0 0);
cursor: pointer;
}
.circle-diagram::before, .circle-diagram::after{
content: "";
position: absolute;
z-index: -1;
}
.circle-diagram::before{
inset: 1em;
background-color: var(--accent-color);
background-image:
circle at calc(50% - 0.25rem) calc(50% + 0.25rem),
rgb(0 0 0 / .25) 25%,
transparent calc(25% + 0.5rem)
),
rgb(255 255 255 / .25) 0deg,
rgb(0 0 0 / .25) var(--degree)
),
at calc(50% - 0.4rem) calc(50% + 0.4rem),
transparent var(--degree),
rgb(0 0 0 / .25) calc(var(--degree) + 5deg)
);
}
.circle-diagram::after{
inset: 0;
background-color: rgb(50 50 50);
background-image: linear-gradient(transparent, rgb(0 0 0 / .5));
}```

3. To enable smooth transitions, load the latest GSAP JavaScript animation library in the document.

`<script src='https://unpkg.co/[email protected]/dist/gsap.min.js'></script>`

```// only for animation