React 17.0.2, TypeScript 4.3.5, Recharts 2.1.5 환경에서 사용할 수 있는 Recharts 라이브러리를 이용하여 구현 가능한 차트 종류를 정리

1. Line Chart (선형 차트)

- 특징: 시계열 데이터, 추세 표현에 적합
- 주요 컴포넌트: `<LineChart>`, `<Line>`, `<XAxis>`, `<YAxis>`, `<CartesianGrid>`, `<Tooltip>`


import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const data = [
  { name: 'Page A', uv: 400 },
  { name: 'Page B', uv: 300 },
  { name: 'Page C', uv: 200 },
];

export const MyLineChart = () => (
  <LineChart width={400} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  </LineChart>
);




 2. Bar Chart (막대 차트)

- 특징: 범주별 수치 비교
- 주요 컴포넌트: `<BarChart>`, `<Bar>`, `<XAxis>`, `<YAxis>`, `<Tooltip>`


import { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';

const data = [
  { name: 'Group A', value: 120 },
  { name: 'Group B', value: 200 },
];

export const MyBarChart = () => (
  <BarChart width={400} height={300} data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Bar dataKey="value" fill="#82ca9d" />
  </BarChart>
);




 3. Pie Chart (원형 차트)

- 특징: 비율 표현
- 주요 컴포넌트: `<PieChart>`, `<Pie>`, `<Cell>`, `<Tooltip>`, `<Legend>`


import { PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'A', value: 25 },
  { name: 'B', value: 35 },
];

const COLORS = ['#0088FE', '#00C49F'];

export const MyPieChart = () => (
  <PieChart width={400} height={300}>
    <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} fill="#8884d8">
      {data.map((entry, index) => (
        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
      ))}
    </Pie>
    <Tooltip />
    <Legend />
  </PieChart>
);




 4. Area Chart (면적 차트)

- 특징: 추세 + 면적으로 데이터 표현
- 주요 컴포넌트: `<AreaChart>`, `<Area>`, `<XAxis>`, `<YAxis>`, `<Tooltip>`


import { AreaChart, Area, XAxis, YAxis, Tooltip } from 'recharts';

const data = [
  { name: 'Week 1', uv: 400 },
  { name: 'Week 2', uv: 300 },
];

export const MyAreaChart = () => (
  <AreaChart width={400} height={300} data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Area type="monotone" dataKey="uv" stroke="#ff7300" fill="#ff7300" />
  </AreaChart>
);




 5. Scatter Chart (산점도)

- 특징: 두 변수 간의 상관관계 표현
- 주요 컴포넌트: `<ScatterChart>`, `<Scatter>`, `<XAxis>`, `<YAxis>`, `<ZAxis>`, `<Tooltip>`


import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, Tooltip } from 'recharts';

const data = [
  { x: 10, y: 20, z: 50 },
  { x: 30, y: 40, z: 100 },
];

export const MyScatterChart = () => (
  <ScatterChart width={400} height={300}>
    <XAxis dataKey="x" />
    <YAxis dataKey="y" />
    <ZAxis dataKey="z" />
    <Tooltip />
    <Scatter data={data} fill="#8884d8" />
  </ScatterChart>
);




 6. Radar Chart (레이더 차트)

- 특징: 여러 변수의 값 비교 (예: 성능 평가)
- 주요 컴포넌트: `<RadarChart>`, `<Radar>`, `<PolarGrid>`, `<PolarAngleAxis>`, `<PolarRadiusAxis>`


import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts';

const data = [
  { subject: 'Math', A: 120, B: 100 },
  { subject: 'Science', A: 98, B: 130 },
];

export const MyRadarChart = () => (
  <RadarChart cx={200} cy={200} outerRadius={150} width={400} height={400} data={data}>
    <PolarGrid />
    <PolarAngleAxis dataKey="subject" />
    <PolarRadiusAxis />
    <Radar name="A" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
    <Radar name="B" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
  </RadarChart>
);




 7. Radial Bar Chart (원형 막대 차트)

- 특징: 원형 형태의 막대 차트 (진행률, 점수 등)
- 주요 컴포넌트: `<RadialBarChart>`, `<RadialBar>`, `<PolarAngleAxis>`, `<PolarRadiusAxis>`


import { RadialBarChart, RadialBar, PolarAngleAxis } from 'recharts';

const data = [{ name: 'Progress', value: 75 }];

export const MyRadialBarChart = () => (
  <RadialBarChart width={300} height={300} innerRadius="20%" outerRadius="80%" data={data} startAngle={90} endAngle={-270}>
    <PolarAngleAxis type="number" domain={[0, 100]} angleUnit={360} />
    <RadialBar dataKey="value" fill="#8884d8" background />
  </RadialBarChart>
);




 8. Composed Chart (복합 차트)

- 특징: 여러 종류의 차트를 조합하여 표현
- 주요 컴포넌트: `<ComposedChart>`, `<Line>`, `<Bar>`, `<Area>`, `<XAxis>`, `<YAxis>`, `<Tooltip>`


import { ComposedChart, Line, Bar, Area, XAxis, YAxis, Tooltip } from 'recharts';

const data = [
  { name: 'Page A', uv: 50, pv: 80, amt: 100 },
  { name: 'Page B', uv: 150, pv: 90, amt: 120 },
];

export const MyComposedChart = () => (
  <ComposedChart width={400} height={300} data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Bar dataKey="pv" barSize={20} fill="#413ea0" />
    <Line type="monotone" dataKey="uv" stroke="#ff7300" />
    <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
  </ComposedChart>
);




## 📌 기타 유용한 컴포넌트

| 컴포넌트 | 용도 |
|||
| `<CartesianGrid />` | 선형 차트의 격자선 |
| `<Legend />` | 범례 표시 |
| `<Tooltip />` | 마우스 오버 시 데이터 표시 |
| `<ResponsiveContainer />` | 반응형 크기 조절 (별도 설치 필요: `recharts-responsive-container`) |
| `<Brush />` | 범위 선택 (확대/축소) 기능 |
| `<ReferenceLine />` | 기준선 추가 |
| `<Label />` | 라벨 추가 |



## ✅ TypeScript 사용 시 주의점

- 모든 컴포넌트는 `React.FC`로 선언 가능
- 데이터는 `interface` 또는 `type`으로 타입 정의 권장
- `dataKey`는 반드시 `string` 타입으로 사용
- Recharts는 TypeScript 지원이 기본 포함되어 있음 (별도 타이핑 불필요)


interface ChartData {
  name: string;
  uv: number;
  pv: number;
}

const MyLineChart: React.FC<{ data: ChartData[] }> = ({ data }) => (
  <LineChart data={data}>...</LineChart>
);


## 🔗 참고 문서
- [Recharts 공식 문서](https://recharts.org/)
- [Recharts GitHub](https://github.com/recharts/recharts)