RadarChart

RadarChart

레이더 차트 컴포넌트예요. 여러 범주에 대한 값을 방사형 축으로 비교할 때 사용해요. recharts의 RadarChart를 기반으로 해요.

출처: 문서

본문

Usage

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

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

function Demo() {
  return (
    <RadarChart h={300} data={data} dataKey="product" series={[{ name: 'Sales January', color: 'lime.4', opacity: 0.1 }]} />
  );
}

Multiple series

같은 레이더 차트에 여러 시리즈를 표시할 수 있어요.

Change color

다른 컴포넌트처럼 theme에서 색을 참조할 수 있어요(blue, red.5, orange.7 등). 유효한 CSS 색상 값도 허용돼요.

Hide/show chart parts

withPolarGrid, withPolarAngleAxis, withPolarRadiusAxis, withTooltip, withDots prop으로 차트의 각 부분 표시 여부를 조절할 수 있어요.

Recharts props

내부 recharts 컴포넌트에 props를 전달하려면 다음 prop을 사용해요.

• radarChartProps – RadarChart 컴포넌트에 props 전달
• polarGridProps – PolarGrid 컴포넌트에 props 전달
• polarAngleAxisProps – PolarAngleAxis 컴포넌트에 props 전달
• polarRadiusAxisProps – PolarRadiusAxis 컴포넌트에 props 전달

PolarRadiusAxis 컴포넌트에 props를 전달하는 예시:

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

function Demo() {
  return (
    <RadarChart
      h={300}
      data={data}
      dataKey="product"
      polarRadiusAxisProps={{ tickFormatter: (value: number) => `${value}$` }}
      series={[
        { name: 'Sales January', color: 'lime.4', opacity: 0.1 },
        { name: 'Sales February', color: 'cyan.4', opacity: 0.1 },
      ]}
    />
  );
}

Legend

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

더 알아보기 (Learn more)

• FunnelChart
• ScatterChart