도넛 차트

부분-전체 분포를 도넛 + 우측 범례(라벨·값·%)로 한눈에 보여준다. 세그먼트 사이는 2px 서페이스 갭, 값 텍스트는 텍스트 토큰(계열색 텍스트 금지)이다. 한눈 파악용이라 세그먼트는 6개 이하를 권장: 근접 값 비교가 목적이면 막대를 쓴다.

상태

신규12048%

재방문8835%

이탈4016%

기본

248건

신규12048%

재방문8835%

이탈4016%

중앙 라벨

활용 방법

유입 경로 분포

centerLabel 로 도넛 중앙에 합계 등을 넣는다. 각 세그먼트를 hover 하면 값과 비율이 title 로 노출된다.

Preview

1,248

검색54043%

직접36029%

SNS22818%

추천12010%

tsx

<DonutChart
  size={168}
  centerLabel="1,248"
  segments={[
    { label: "검색", value: 540 },
    { label: "직접", value: 360 },
    { label: "SNS", value: 228 },
    { label: "추천", value: 120 },
  ]}
/>

언제 쓰지 않나

· 근접한 값들을 정확히 비교해야 할 때 → 막대 차트를 쓴다(각도는 비교에 약하다).
· 세그먼트가 7개 이상일 때 → 상위 N + "기타"로 묶거나 분포 바를 쓴다.
· 좁은 카드 한 줄에 넣어야 할 때 → DistBar(가로 누적 바)가 더 컴팩트하다.

속성

이름	타입	기본값	설명
segments	DonutSegment[]	-	세그먼트 배열: { label, value, tone? }
centerLabel	string	-	도넛 중앙 텍스트(합계 등)
size	number	148	도넛 지름(px)