프로젝트 도중 선그래프를 만들어야하는 상황이 있어서 react-chat-js2 라이브러리를 사용했다.

1. 등록

react-chart js-2 에서 import 해오는 차트 컴포넌트와는 별개로 chart.js에서 필요한 것들을 import해온 후 register를 해야 차트를 렌더링 할 수 있다.

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Line } from "react-chartjs-2";

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

2. 차트의 형태

<Line data={data} /> // 선 그래프
<Bar data={data} /> // 막대 그래프
<Chart type='line' data={data} /> // 선 그래프

나는 선 그래프를 만들고 싶었기 때문에

<Line data={data} />

로 사용 했다.

3. 차트에 들어가는 데이터

컴포넌트의 prop

const Rank = matches.map((obj) => Number(obj.player.playerRanking));

const data = {
    labels: Rank, // optional (y축의 index)
    datasets: [
       // datasets는 데이터 관련 정보 (값,컬러,라벨 등)을 담은 dataset 객체들을 가지고 있는 배열
      {
        label: "순위",
        data: Rank.filter((number) => number < 9 && 0 < number), // 순위 그래프
        borderColor: "gray",
        backgroundColor: "white",
      },
    ],
  };