[React] 그래프와 차트를 그려보자

오늘은 그래프/차트를 React에서 그리는 법을 배워보도록 하겠어요.

[1] recharts 패키지 다운받기

npm install recharts

[2] Chart.js 파일 생성하기

전체 코드

import React, { PureComponent } from 'react';
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';

const data = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400, },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210, },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290, },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000, },
  { name: 'Page E', uv: 1890, pv: 4800, amt: 2181, },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2500, },
  { name: 'Page G', uv: 3490, pv: 4300, amt: 2100, },
];

function Chart() {
    return (
        <LineChart width={500} height={300} data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
            <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
    );
}

export default Chart;

코드 파악하기

LineChart : 선 그래프

• width, height : 그래프의 넓이 및 높이
• data : 그래프에 나타낼 데이터
• margin : 그래프의 margin

<LineChart width={500} height={300} data={data}>

CartesianGrid : 그래프 보조선

• strokeDasharray : 링크참고

 <CartesianGrid strokeDasharray="3 3" />

XAxis : X축

• dataKey : 표시할 value의 data map key

<XAxis dataKey="name" />

YAxis : Y축

• dataKey : 표시할 value의 data map key

<YAxis dataKey="name" />

Tooltip : 마우스 hover 시 해당 값을 보여주는 튤립

<Tooltip />

Legend : 선의 설명을 나타내는 지표

<Legend />

Line : 선

• type : 'basis' | 'basisClosed' | 'basisOpen' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | Function... DEFAULT: 'linear'
• dataKey : 표시할 value의 data map key
• stroke : 선의 색상
• activeDot : 그래프에 마우스를 올릴 시 원의 스타일 설정

<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />

[3] 컴포넌트 결과 화면

마무리

이렇게 recharts 패키지를 사용하는 방법을 배웠습니당

어렵지 않게 차트를 그릴 수 있으니 멋진 react 개발자가 되기를,,