[Recharts] Recharts 사용법 이 글 하나로 마스터(Basic)

 

맨날 정리 해야지 하다가 드디어 정리 한다.

단순히 빨리 Rechart를 다루고싶은 분들(나 포함) 에게 이 글이 큰 도움이 되길 바란다.

설치

 # latest stable
  $ npm install recharts

 

---

코드 예시

import React from "react";
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

const data = [
  { name: "Mon", uv: 25, pv: 2400 },
  { name: "Tue", uv: 10, pv: 2210 },
  { name: "Wed", uv: 28, pv: 2290 },
  { name: "Thu", uv: 44, pv: 2000 },
  { name: "Fri", uv: 54, pv: 2181 },
  { name: "Sat", uv: 50, pv: 2500 },
  { name: "Sun", uv: 32, pv: 2500 },
];

const LineChartExample: React.FC = () => (
  <ResponsiveContainer width="100%" height={400}>
    <LineChart data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="uv" stroke="#8884d8" strokeWidth={2} dot={{ r: 5 }} activeDot={{ r: 8 }} />
    </LineChart>
  </ResponsiveContainer>
);

export default LineChartExample;

 

---

각  요소별 역할

ResponsiveContainer

차트를 반응형으로 만들기 위해 사용됩니다. 이 컨테이너 안에 차트를 포함시키면, 차트가 부모 요소의 크기에 맞게 조정됩니다.

 

CartesianGrid

차트에 격자선을 추가하여 데이터를 더 쉽게 읽을 수 있게 만듭

 

XAxis

YAxis

축을 정의하고 데이터의 키를 설정

 

Tooltip 

마우스를 데이터 점 위에 올렸을 때 툴팁을 표시하여 추가 정보를 제공

 

Line

차트에서 데이터를 라인 형태로 표시

 

---

각 요소별 옵션 설명

Line 컴포넌트

옵션	타입	기본값	설명
type	string	"linear"	라인의 타입을 지정합니다. ("linear", "monotone", "step", "basis", "cardinal" 등)
dataKey	string	-	데이터를 참조하는 키를 지정합니다.
stroke	string	"#000000"	라인의 색상
strokeWidth	string	1	라인의 두께
dot	boolean or object	true	데이터 점 표시 여부
activeDot	boolean or object	true	활성 데이터 점을 커스터마이징
strokeDasharray	string	-	라인의 점선 패턴을 지정(예: "3 3")
strokeOpacity	number	1	라인의 불투명 지정 (0에서 1사이)
isAnimationActive	boolean	true	애니메이션 활성화 지정
animationBegin	number	0	애니메이션 시작시간 지정
animationDuration	number	1500	애니메이션 지속 시간 지정
connectNulls	boolean	true	null 값을 연결할지 여부를 지정

 

Line 컴포넌트 적용 예시

import React from "react";
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";

const data = [
  { name: "Mon", uv: 25, pv: 2400 },
  { name: "Tue", uv: 10, pv: 2210 },
  { name: "Wed", uv: 28, pv: 2290 },
  { name: "Thu", uv: 44, pv: 2000 },
  { name: "Fri", uv: 54, pv: 2181 },
  { name: "Sat", uv: 50, pv: 2500 },
  { name: "Sun", uv: 32, pv: 2500 },
];

const LineChartExample: React.FC = () => (
  <ResponsiveContainer width="100%" height={400}>
    <LineChart data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="uv" stroke="#8884d8" strokeWidth={2} dot={{ r: 5 }} activeDot={{ r: 8 }} />
    </LineChart>
  </ResponsiveContainer>
);

export default LineChartExample;

ResponsiveContainer

옵션	타입	기본값	설명
width	number or string	-	컨테이너의 너비를 지정합니다. (예: "100%", 400)
height	number or string	-	컨테이너의 높이를 지정합니다. (예: "100%", 400)
minWidth	number	-	컨테이너의 최소 너비를 지정합니다.
minHeight	number	-	컨테이너의 최소 높이를 지정합니다.
maxWidth	number	-	컨테이너의 최대 너비를 지정합니다.
maxHeight	number	-	컨테이너의 최대 높이를 지정합니다.
aspect	number	-	width/height 비율을 지정하여 반응형 크기를 설정합니다.
debounce	number	-	리사이즈 이벤트의 디바운스 시간을 밀리초 단위로 지정합니다.

CartesianGrid

옵션	타입	기본값	설명
stroke	string	"#ccc"	그리드 선의 색상을 지정합니다.
strokeDasharray	string	-	그리드 선의 점선 패턴을 지정합니다. (예: "3 3")
strokeWidth	number	1	그리드 선의 두께를 지정합니다.
fill	string	"none"	그리드의 배경색을 지정합니다.
fillOpacity	number	1	그리드 배경색의 불투명도를 지정합니다. (0에서 1 사이의 값)
horizontal	boolean	true	수평 그리드를 표시할지 여부를 지정합니다.
vertical	boolean	true	수직 그리드를 표시할지 여부를 지정합니다.
horizontalPoints	number[]	-	수평 그리드 선이 위치할 y값을 배열로 지정합니다.
verticalPoints	number[]	-	수직 그리드 선이 위치할 x값을 배열로 지정합니다.

XAxis

옵션	타입	기본값	설명
dataKey	string	-	X축에 표시할 데이터를 참조하는 키를 지정합니다.
type	"number" | "category"	"category"	축의 데이터를 숫자 또는 카테고리로 지정합니다.
height	number	-	X축의 높이를 지정합니다.
width	number	-	X축의 너비를 지정합니다.
tick	boolean | object | function	true	축의 눈금 표시 여부를 지정합니다. 객체나 함수로 커스터마이즈할 수 있습니다.
tickSize	number	6	눈금의 크기를 지정합니다.
tickMargin	number	2	눈금과 축 레이블 간의 간격을 지정합니다.
tickFormatter	function	-	눈금의 값을 포맷팅할 함수를 지정합니다.
interval	number | "preserveStart" | "preserveEnd" | "preserveStartEnd" | "preserveStartEndReverse" | "preserveStartReverse" | "preserveEndReverse"	"preserveStartEnd"	눈금 간격을 지정합니다.
reversed	boolean	false	축의 방향을 반대로 할지 여부를 지정합니다.
allowDuplicatedCategory	boolean	true	카테고리 값의 중복을 허용할지 여부를 지정합니다.
axisLine	boolean | object	true	축의 라인을 표시할지 여부를 지정합니다. 객체로 커스터마이즈할 수 있습니다.
tickLine	boolean | object	true	축의 눈금 라인을 표시할지 여부를 지정합니다. 객체로 커스터마이즈할 수 있습니다.
mirror	boolean	false	축을 반대로 표시할지 여부를 지정합니다.
minTickGap	number	5	최소 눈금 간격을 지정합니다.
orientation	"bottom" | "top"	"bottom"	축의 위치를 지정합니다. (위 또는 아래)
allowDecimals	boolean	true	숫자 눈금을 소수점으로 표시할지 여부를 지정합니다.

Tooltip

옵션	타입	기본값	설명
separator	string	" : "	툴팁 항목의 이름과 값을 구분하는 문자열을 지정합니다.
offset	number	10	툴팁이 마우스로부터 떨어진 거리를 지정합니다.
itemStyle	object	{}	툴팁 항목의 스타일을 지정합니다.
wrapperStyle	object	{}	툴팁 래퍼의 스타일을 지정합니다.
labelStyle	object	{}	툴팁 레이블의 스타일을 지정합니다.
cursor	boolean | object	true	툴팁 커서의 표시 여부를 지정합니다. 객체로 커스터마이즈할 수 있습니다.
contentStyle	object	{}	툴팁 콘텐츠의 스타일을 지정합니다.
formatter	function	-	툴팁 항목의 값을 포맷팅할 함수를 지정합니다.
labelFormatter	function	-	툴팁 레이블의 값을 포맷팅할 함수를 지정합니다.
content	ReactElement | function	-	툴팁의 콘텐츠를 커스터마이즈할 React 컴포넌트나 함수를 지정합니다.
filterNull	boolean	true	null 값을 툴팁에서 필터링할지 여부를 지정합니다.
allowEscapeViewBox	{ x: boolean, y: boolean }	{ x: true, y: true }	툴팁이 차트 영역을 벗어날 수 있는지 여부를 지정합니다.

 

---

참고

https://recharts.org/en-US