[React] react-chartjs-2 로 쉽게 차트그리기

통계 페이지를 개발하려하는데 차트를 그릴일이 필요했다.

내가 사용한 건 react-chartjs-2 !

구글링을 해보다가 유명하다고 해서 한번 써봤다.

사용방법을 정리해봐야겠다

 

사용방법

npm install --save chart.js react-chartjs-2

https://react-chartjs-2.js.org/examples

Examples | react-chartjs-2

난 이 페이지에서 내게 필요한 차트 모양을 찾아서 들어갔다.

예를들어 나는 Line Chart 를 찾아 들어가서 예시 코드를 살펴봤다.

App.tsx에 있는 코드들을 가져와준다. tsx 코드라서 js 파일에서 쓰기엔 수정할 부분이 있었다.

faker 를 import 해주는 부분을 삭제하고, 

미리 지정된 labels 와 랜덤 data value 들은 모두 서버에서 받아온 적절한 값으로 대체시켜줬다.

 

datasets 방법은 아래 링크를 참고하면 좋을 것 같다.

https://react-chartjs-2.js.org/docs/working-with-datasets

Working with datasets | react-chartjs-2

import React, { useEffect, useState } from "react";
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";
import { useRecoilState } from "recoil";
import { urlState } from "../../src/recoilState";

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
);

function Lastweek() {
    const [rootUrl, setRootUrl] = useRecoilState(urlState);
    const [chatData, setChatData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(
                    `${rootUrl}/admin/dashboard/lastweek`
                );
                const json = await response.json();
                setChatData(json.data);
            } catch (error) {
                console.log("Error :", error);
            }
        };
        fetchData();
        console.log(chatData);
    }, []);

    const options = {
        responsive: true,
        plugins: {
            legend: {
                position: "top",
            },
            title: {
                display: true,
                text: "지난 7일 간 채팅 건수",
            },
        },
    };

    let labels = [];
    if (chatData.length > 0) {
        labels = chatData.map((data) => data.x);
    }

    const data = {
        labels,
        datasets: [
            {
                label: "채팅 건수",
                data: chatData.map((data) => data.y),
                borderColor: "rgb(255, 99, 132)",
                backgroundColor: "rgba(255, 99, 132, 0.5)",
            },
        ],
    };
    return (
        <div>
            {chatData.length > 0 && <Line options={options} data={data} />}
        </div>
    );
}

export default Lastweek;

왼쪽 이미지가 Line chart 를 적용한 모습이다.

애니메이션도 들어가서 예쁘다. 

 

react-chartjs-2 의 공식문서는 아래에 있다.

찬찬히 살펴보면 금방 따라할 수 있었다.

https://react-chartjs-2.js.org/

react-chartjs-2 | react-chartjs-2