Круговая диаграмма

Диаграмма с одним значением

<style>
.pie {
  width: 12em; /* диаметр */ 
  aspect-ratio: 1; /* ширина = высота */ 
  border-radius: 50%; /* закругление углов */ 
  background: conic-gradient(darkturquoise var(--pie-p, 0%), whitesmoke 0); /* конический градиент с цветами darkturquoise и whitesmoke */ 
}
</style>

<!-- установить свое значение для переменной --pie-p (p в честь percent) -->
<div class="pie" style="--pie-p:65%;"></div>

<style>
.pie {
  width: 12em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(darkturquoise var(--pie-p, 0%), whitesmoke 0);
}
.pie.mask {
  --pie-b: 1em;  /* толщина линии по умолчанию */ 
  mask: radial-gradient(farthest-side,#0000 calc(99% - var(--pie-b)),#000 calc(100% - var(--pie-b)));
}
</style>

<!-- при желании, установить свое значение для переменной --pie-b -->
<div class="pie mask" style="--pie-p:65%; --pie-b:1.5em;"></div>

65%

<style>
.pie {
  --pie-b: 15px;
  position: relative;
  /* текст по центру */ 
  display: inline-grid;
  place-content: center;

  width: 150px;
  aspect-ratio: 1;
  font: bold 2em sans-serif;  /* размер (2em) и шрифт текста */ 
}
.pie::before {
  content: "";
  /* растянуть на всю площадь родителя */ 
  position: absolute;
  inset: 0;
  z-index: -1;

  border-radius: 50%;
  background: conic-gradient(darkturquoise var(--pie-p, 0%), whitesmoke 0);
  mask: radial-gradient(farthest-side,#0000 calc(99% - var(--pie-b)),#000 calc(100% - var(--pie-b)));
}
</style>

<!-- при желании, установить свое значение для переменной --pie-b -->
<div class="pie" style="--pie-p:65%;">65%</div>

Пример с закругленными краями [freecodecamp.org].

Диаграмма с пятью значениями

<style>
.pie {
  --pie-p_1: var(--pie-p1, 0%); /* если переменная --pie-p1 не задана, то использовать 0% */ 
  --pie-p_2: calc(var(--pie-p_1) + var(--pie-p2, 0%));
  --pie-p_3: calc(var(--pie-p_2) + var(--pie-p3, 0%));
  --pie-p_4: calc(var(--pie-p_3) + var(--pie-p4, 0%));
  --pie-c: 170; /* цвет */ 
  width: 12em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    hsl(var(--pie-c), 80%, 80%) var(--pie-p_1),
    hsl(var(--pie-c), 70%, 70%) 0 var(--pie-p_2),
    hsl(var(--pie-c), 60%, 60%) 0 var(--pie-p_3),
    hsl(var(--pie-c), 50%, 50%) 0 var(--pie-p_4),
    hsl(var(--pie-c), 40%, 40%) 0  /* последнее значение занимает оставшееся пространство */ 
  );
}
</style>

<div class="pie" style="--pie-p1:25%; --pie-p2:3%; --pie-p3:10%; --pie-p4:40%"></div>

<style>
.pie {
  --pie-p_1: var(--pie-p1, 0%);
  --pie-p_2: calc(var(--pie-p_1) + var(--pie-p2, 0%));
  --pie-p_3: calc(var(--pie-p_2) + var(--pie-p3, 0%));
  --pie-p_4: calc(var(--pie-p_3) + var(--pie-p4, 0%));
  --pie-c: 170;
  width: 12em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    hsl(var(--pie-c), 80%, 80%) var(--pie-p_1),
    hsl(var(--pie-c), 70%, 70%) 0 var(--pie-p_2),
    hsl(var(--pie-c), 60%, 60%) 0 var(--pie-p_3),
    hsl(var(--pie-c), 50%, 50%) 0 var(--pie-p_4),
    hsl(var(--pie-c), 40%, 40%) 0
  );
}
.pie.mask {
  --pie-b: 1em;
  mask: radial-gradient(farthest-side,#0000 calc(99% - var(--pie-b)),#000 calc(100% - var(--pie-b)));
}
</style>

<div class="pie mask" style="--pie-p1:25%; --pie-p2:3%; --pie-p3:10%; --pie-p4:40%; --pie-b:40%;"></div>

Круговая диаграмма с легендой

Наводя мышкой на значения легенды, меняется цвет секторов.

Январь

Февраль

Март

Апрель

Май

<style>
.pie {
  display: grid;
  grid-template-columns: 12em 10em; /* 12em — размер диаграммы, 10em — размер легенды */
  gap: 0 3em; /* 3em - 2em (margin-left) = 1em — расстояние от диаграммы до легенды */
  --pie-c_1: 170;  /* неактивный цвет */ 
  --pie-c_2: 60;  /* активный цвет */ 
  --pie-c1: var(--pie-c_1);
  --pie-c2: var(--pie-c_1);
  --pie-c3: var(--pie-c_1);
  --pie-c4: var(--pie-c_1);
  --pie-c5: var(--pie-c_1);
  overflow: auto;
}
.pie div:not(:last-of-type) {
  grid-column: 2 / 3;
  align-self: center;
}
.pie div:not(:last-of-type)::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin-left: -2em; /* 1.5em (width) + .5em (margin-right) = 2em */
  margin-right: .5em;
  vertical-align: middle;
}
.pie div:nth-of-type(1):before {
  background: hsl(var(--pie-c1), 80%, 80%);
}
.pie div:nth-of-type(2):before {
  background: hsl(var(--pie-c2), 70%, 70%);
}
.pie div:nth-of-type(3):before {
  background: hsl(var(--pie-c3), 60%, 60%);
}
.pie div:nth-of-type(4):before {
  background: hsl(var(--pie-c4), 50%, 50%);
}
.pie div:nth-of-type(5):before {
  background: hsl(var(--pie-c5), 40%, 40%);
}
.pie div:last-of-type {
  grid-column: 1 / 2;
  grid-row: 1 / 6;
}
.pie div:last-of-type {
  --pie-p_1: var(--pie-p1, 0%);
  --pie-p_2: calc(var(--pie-p_1) + var(--pie-p2, 0%));
  --pie-p_3: calc(var(--pie-p_2) + var(--pie-p3, 0%));
  --pie-p_4: calc(var(--pie-p_3) + var(--pie-p4, 0%));
  width: 12em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    hsl(var(--pie-c1), 80%, 80%) var(--pie-p_1),
    hsl(var(--pie-c2), 70%, 70%) 0 var(--pie-p_2),
    hsl(var(--pie-c3), 60%, 60%) 0 var(--pie-p_3),
    hsl(var(--pie-c4), 50%, 50%) 0 var(--pie-p_4),
    hsl(var(--pie-c5), 40%, 40%) 0
  );
}
.pie div:nth-of-type(1):hover,
.pie div:nth-of-type(1):hover ~ div:last-of-type {
  --pie-c1: var(--pie-c_2);
}
.pie div:nth-of-type(2):hover,
.pie div:nth-of-type(2):hover ~ div:last-of-type {
  --pie-c2: var(--pie-c_2);
}
.pie div:nth-of-type(3):hover,
.pie div:nth-of-type(3):hover ~ div:last-of-type {
  --pie-c3: var(--pie-c_2);
}
.pie div:nth-of-type(4):hover,
.pie div:nth-of-type(4):hover ~ div:last-of-type {
  --pie-c4: var(--pie-c_2);
}
.pie div:nth-of-type(5):hover,
.pie div:nth-of-type(5):hover ~ div:last-of-type {
  --pie-c5: var(--pie-c_2);
}
</style>

<div class="pie">
  <div>Январь</div>
  <div>Февраль</div>
  <div>Март</div>
  <div>Апрель</div>
  <div>Май</div>
  <div style="--pie-p1:25%; --pie-p2:3%; --pie-p3:10%; --pie-p4:40%;"></div>
</div>

Круговая диаграмма на основе conic-gradient

Диаграмма с одним значением

Диаграмма с пятью значениями

Круговая диаграмма с легендой

Круговая диаграмма на основе `conic-gradient`