SunburstChart

개요

SunburstChart는 recharts의 SunburstChart를 얇게 래핑한 독립 차트입니다. 루트에서부터 중첩된 children을 가진 단일 트리 노드를 받아 동심원으로 렌더링합니다.

resolveTreeData — 전체 트리의 fill/stroke $토큰을 재귀적으로 해석
컨테이너 불필요 — width/height를 직접 지정

언제 사용하나요

계층 + 비율을 동시에 — 다층 카테고리 점유율
드릴다운 UX — 중심부터 외곽으로 확장되는 구조

Usage

기본 사용법

단일 루트 노드에 children 트리를 전달합니다.

() => {
const data = {
  name: '콘텐츠',
  value: 1030,
  fill: '$primary-10',
  children: [
    {
      name: 'SNS',
      value: 490,
      fill: '$primary-40',
      children: [
        { name: '인스타그램', value: 270, fill: '$primary-50' },
        { name: '틱톡', value: 220, fill: '$teal-50' },
      ],
    },
    {
      name: '유튜브',
      value: 360,
      fill: '$lightBlue-40',
      children: [
        { name: '숏츠', value: 180, fill: '$lightBlue-40' },
        { name: '롱폼', value: 180, fill: '$lightBlue-30' },
      ],
    },
    {
      name: '블로그',
      value: 180,
      fill: '$gray-50',
    },
  ],
};
return (
  <SunburstChart data={data} width={500} height={400}>
    <ChartTooltip />
  </SunburstChart>
);
}

사용자 지정 크기

width, height, innerRadius 로 차트 크기를 조정합니다. SunburstChart는 ResponsiveContainer 없이 직접 크기를 받습니다.

() => {
const data = {
  name: '콘텐츠',
  value: 540,
  fill: '$primary-10',
  children: [
    {
      name: 'SNS',
      value: 260,
      fill: '$primary-40',
      children: [
        { name: '인스타그램', value: 160, fill: '$primary-50' },
        { name: '틱톡', value: 100, fill: '$teal-50' },
      ],
    },
    {
      name: '유튜브',
      value: 180,
      fill: '$lightBlue-40',
    },
    {
      name: '블로그',
      value: 100,
      fill: '$gray-50',
    },
  ],
};
return (
  <SunburstChart data={data} width={400} height={300} innerRadius={30}>
    <ChartTooltip />
  </SunburstChart>
);
}

fill / stroke 토큰

루트 fill은 data.fill이 없는 노드의 기본 채우기, stroke는 전체 세그먼트 외곽선입니다.

() => {
const data = {
  name: '콘텐츠',
  value: 540,
  children: [
    {
      name: 'SNS',
      value: 260,
      children: [
        { name: '인스타그램', value: 160 },
        { name: '틱톡', value: 100 },
      ],
    },
    { name: '유튜브', value: 180 },
    { name: '블로그', value: 100 },
  ],
};
return (
  <SunburstChart
    data={data}
    width={500}
    height={400}
    fill="$gray-20"
    stroke="$background-1"
  >
    <ChartTooltip />
  </SunburstChart>
);
}

Props

recharts SunburstChart를 래핑합니다. 여기에 명시되지 않은 props는 recharts SunburstChart API를 참고하세요.

extends recharts SunburstChart

Prop

Type

SunburstChart

On this page