const Round = document.querySelector('.round');

Round.addEventListener('mouseover', () => {
  Round.classList.add('yellow');
});

Round.addEventListener('mouseout', () => {
  Round.classList.remove('yellow');
});

Round.addEventListener('click', () => {
  Round.classList.toggle('green');
});

.round {

  transform: rotate(-90deg);
  transition: all 1s ease-in-out;
  width: 100%;
  height: 100%;
  /* SVG */
  fill: none;
  stroke: red;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 200 999;
  box-shadow: 0 0 8px 2px  red;
}

box-shadow: 0 0 8px 2px red; не подходит, так как задает тень для всего блока, а нужно только для рисуемой окружности графика

Вы правы, для того чтобы добавить тень только для рисуемой окружности можно добавить ещё один класс, который будет задавать тень для этой окружности, например:

.round {
  /* свойства для окружности */
}

.round-shadow {
  box-shadow: 0 0 8px 2px red; /* свойства тени */
}

Затем при добавлении класса .round-shadow элементу .round будет добавлена тень только на окружность, но не на остальную часть блока. Например:

const Round = document.querySelector('.round');

Round.addEventListener('mouseover', () => {
  Round.classList.add('yellow');
  Round.classList.add('round-shadow');
});

Round.addEventListener('mouseout', () => {
  Round.classList.remove('yellow');
  Round.classList.remove('round-shadow');
});

Round.addEventListener('click', () => {
  Round.classList.toggle('green');
});

а как этот класс применить для HTML?

Класс .round-shadow, который создан для добавления тени только на рисуемую окружность, нужно применить к элементу, который отвечает за рисование окружности.

В вашем случае, я вижу, что ваш график рисуется с помощью элемента SVG, в котором находится элемент <circle> (вероятно, он и отвечает за рисование окружности). Поэтому этому элементу нужно добавить класс .round-shadow:

<svg>
  <circle class="round round-shadow" cx="25" cy="25" r="20"></circle>
</svg>

Здесь я добавил классы .round и .round-shadow элементу <circle>. Обратите внимание, что оба класса записаны через пробел, это нужно для того, чтобы добавить несколько классов одному элементу.

Таким образом, при добавлении класса .round-shadow к элементу .round будет добавлена тень только на рисуемую окружность внутри SVG, а не на все содержимое.

данный способ не работает, есть ли еще варианты?

Если вам нужна тень только для визуального улучшения рисуемой окружности на графике, то можно просто добавить её внутри SVG элемента, а не задавать её через стили CSS.

Для этого нужно добавить элемент <filter> с нужными параметрами фильтрации и применить его к элементу <circle> с помощью атрибута filter. Вот пример кода:

<svg>
  <filter id="shadow">
    <feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="red" />
  </filter>
  <circle class="round" cx="25" cy="25" r="20" filter="url(#shadow)"></circle>
</svg>

Здесь внутри элемента <svg> мы добавляем элемент <filter> с идентификатором id="shadow", а внутри этого элемента указываем параметры фильтрации. Затем добавляем атрибут filter="url(#shadow)" к элементу <circle>, чтобы применить данный фильтр к этому элементу.

Свойство stdDeviation отвечает за размер тени. Значение 2 означает, что тень будет 2 пикселя в ширину и высоту. Свойство flood-color отвечает за цвет тени.

При таком подходе тень будет добавлена только на рисуемую окружность, но не на остальное содержимое блока.