RadialBarChart

RadialBarChart

방사형 막대 차트 컴포넌트예요. 카테고리 값을 원형으로 분포된 막대로 표현할 때 사용해요. recharts의 RadialBarChart를 기반으로 해요.

출처: 문서

본문

Usage

RadialBarChart는 recharts의 RadialBarChart 컴포넌트를 기반으로 해요.

import { RadialBarChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <RadialBarChart h={280} data={data} dataKey="name" />;
}

Change color

data의 color 속성에 theme 색을 참조하거나 유효한 CSS 색상을 사용할 수 있어요.

import { RadialBarChart } from '@mantine/charts';

const data = [
    { name: '18-24', value: 31.47, color: 'blue' },
    { name: '25-29', value: 26.69, color: 'blue' },
    { name: '30-34', value: 15.69, color: 'blue' },
    { name: '35-39', value: 8.22, color: 'blue' },
    { name: '40-49', value: 8.63, color: 'blue' },
    { name: '50+', value: 2.63, color: 'blue' },
    { name: 'unknown', value: 6.67, color: 'blue' },
  ];

function Demo() {
  return <RadialBarChart h={280} data={data} dataKey="name" />;
}

Legend

범례를 표시하려면 withLegend prop을 설정하세요.

Labels

라벨을 표시하려면 withLabels prop을 설정하세요.

Hide tooltip

툴팁을 숨기려면 withTooltip={false} prop을 설정하세요.

더 알아보기 (Learn more)

• BubbleChart
• Sparkline