RadialBarChart

개요

RadialBarChart는 recharts의 RadialBarChart를 얇게 래핑한 컨테이너입니다. 각 항목이 원형 궤도를 따라 그려지며, 목표 대비 달성도나 원형 게이지 표현에 적합합니다.

RadialBar 시리즈가 fill, stroke, background, activeShape, label $토큰 지원
innerRadius, outerRadius — 궤도 반경
startAngle, endAngle — 시작/끝 각도로 반원/전원 전환

언제 사용하나요

달성률 게이지 — KPI 진행률
원형 비교 — 여러 지표를 원형 궤도로 표시
도넛 대안 — 값 비교 필요 시

Usage

기본 사용법

() => {
const data = [
  { name: '도달률', value: 85, fill: '$primary-50' },
  { name: '참여율', value: 72, fill: '$teal-50' },
  { name: '전환율', value: 45, fill: '$lightBlue-40' },
  { name: '재방문율', value: 30, fill: '$gray-50' },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <RadialBarChart
      data={data}
      cx="50%"
      cy="50%"
      innerRadius="20%"
      outerRadius="90%"
      startAngle={180}
      endAngle={0}
    >
      <RadialBar dataKey="value" label={{ fill: '$text-2', position: 'insideStart', fontSize: 11 }} />
      <ChartTooltip />
      <ChartLegend />
    </RadialBarChart>
  </ResponsiveContainer>
);
}

360도 전원형

startAngle={90}, endAngle={-270}로 전체 원형을 구성합니다.

() => {
const data = [
  { name: '도달률', value: 85, fill: '$primary-50' },
  { name: '참여율', value: 72, fill: '$teal-50' },
  { name: '전환율', value: 45, fill: '$lightBlue-40' },
  { name: '재방문율', value: 30, fill: '$gray-50' },
];
return (
  <ResponsiveContainer width="100%" height={340}>
    <RadialBarChart
      data={data}
      cx="50%"
      cy="50%"
      innerRadius="20%"
      outerRadius="90%"
      startAngle={90}
      endAngle={-270}
    >
      <RadialBar dataKey="value" />
      <ChartTooltip />
      <ChartLegend />
    </RadialBarChart>
  </ResponsiveContainer>
);
}

Slot 토큰 — background / activeShape / label

background는 각 막대 뒤의 트랙 배경, activeShape는 호버 스타일, label은 막대 위 텍스트를 담당합니다. 모두 오브젝트일 때 $ 토큰이 해석됩니다. label 오브젝트에는 fontSize-200 / font.sans / $text-2 기본 typography가 자동 병합되며, 소비자 명시값이 우선합니다.

() => {
const data = [
  { name: '도달률', value: 85, fill: '$primary-50' },
  { name: '참여율', value: 72, fill: '$teal-50' },
  { name: '전환율', value: 45, fill: '$lightBlue-40' },
  { name: '재방문율', value: 30, fill: '$gray-50' },
];
return (
  <ResponsiveContainer width="100%" height={320}>
    <RadialBarChart
      data={data}
      cx="50%"
      cy="50%"
      innerRadius="20%"
      outerRadius="90%"
      startAngle={180}
      endAngle={0}
    >
      <RadialBar
        dataKey="value"
        background={{ fill: '$gray-10' }}
        activeShape={{ fill: '$primary-30', stroke: '$primary-60', strokeWidth: 2 }}
        label={{ fill: '$text-1', position: 'insideStart', fontSize: 11 }}
      />
      <ChartTooltip />
      <ChartLegend />
    </RadialBarChart>
  </ResponsiveContainer>
);
}

Props

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

extends recharts RadialBarChart

Prop

Type

RadialBar

extends recharts RadialBar

Prop

Type

RadialBarChart

On this page