SVG Donut

SvgDonut.tsx

import * as React from "react";

interface DonutProps {
  segments: {
    color: string;
    percentage: number;
  }[];
  thickness?: number;
}

const INITIAL_POINT = 25;

export const SvgDonut: React.FC<DonutProps> = ({ segments, thickness = 3, ...rest }) => {
  let cumulativeLength = 0;

  return (
    <svg width="100%" height="100%" viewBox="0 0 42 42" {...rest}>
      {segments.map(({ color, percentage }, index) => {
        cumulativeLength += index === 0
          ? 0
          : segments[index - 1].percentage;
        return (
          <circle
            key={index}
            cx="21"
            cy="21"
            r='16'
            fill="transparent"
            stroke={color}
            strokeWidth={thickness}
            strokeDasharray={`${percentage} ${100 - percentage}`}
            strokeDashoffset={100 - cumulativeLength + INITIAL_POINT}
          />
        )
      })}
    </svg>
  )
}