리액트 차트 라이브러리 react-chartjs-2 Line Chart 설치, 여러 줄 (데이터 여러개) 라인차트 구현하기, data prop 작성법

오늘은 리액트 차트 라이브러리인 chartjs 를 사용해보겠습니다.!

 

사실 한 두번 정도 제 기준 꽤나 복잡한 걸 적용시켜보았는데

찾을 때마다 정보가 많이 없어서 힘들었어요 ㅠㅠ 그리고 또 쓸 일이 있어서 코드 작성하려니까 정말 기억이 리셋되어서.... 기록해보려고 합니다!!!

 

---

 

https://www.chartjs.org/docs/latest/getting-started/installation.html

Installation | Chart.js

맨 먼저 설치!

pnpm add react-chartjs-2 chart.js

 

react-chartjs-2 와 chart.js 를 설치하였습니다

 

chart.js 는 다양한 종류의 반응형 차트를 쉽게 만들 수 있게 도와주는 오픈 소스 javascript 라이브러리

react-chartjs-2 는 React 애플리케이션 내에서 Chart.js 를 쉽게 사용할 수 있도록 하는 래퍼(wrapper) 컴포넌트라고 합니다!

 

---

 

저는 이렇게 생긴 Line chart 를 생성해 볼 것입니다.!

 

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

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

 

맨 먼저 Graph.jsx 를 생성해주고 맨 위에 이 라이브러리들에서 쓸 기능들을 불러와줬어요

---

그리고 아래처럼 Line 컴포넌트를 불러와주고 매개변수로 options 와 data 를 주어야해요

<Line options={options} data={graphData} />

 

options 는 그래프 밖의 옵션들에 대한 스타일 설정이고,

data 는 그래프 안의 선들에 대한 정보 + 스타일 설정입니다.

 

먼저 data 들을 생성해서 라인 차트를 띄워보고 options 에 대해 알아보도록 해봅시다

 

data

data 는 형식에 맞게 잘 전달해주면 되는데요

공식 문서에 데이터 형식이 나와있습니다!

 

 

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40], // REQUIRED !
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

 

 

공식 문서에 나와 있는 예시를 가져와봤어요!

 

https://www.chartjs.org/docs/latest/charts/line.html

Line Chart | Chart.js

 

공식 문서에 들어가보면 아래에 줄 수 있는 다른 여러가지 옵션들이 많이 있답니다!

공식 문서에는 기본값이 나와있고, 클릭 클릭해서 들어가면 다른 옵션들도 볼 수 있습니다

 

옵션이름	타입	기본값 / 그 외 옵션들
pointStyle	pointStyle	'circle' / 'cross' , 'crossRot' , 'dash' , 'line' , 'rect' , 'rectRounded' , 'rectRot' , 'star' , 'triangle' , false rect : 직사각형 , star 옵션
borderCapStyle	string	'butt' / 'round' , 'square'
backgroundColor	Color	'rgba(0, 0, 0, 0.1)' / 자신이 원하는 색깔의 rgba 값
borderWidth	number	3
order	number	0 직접 data json 을 작성해줄 때 순서 정할 수 있음
pointBackgroundColor	Color
tenstion	number	0 / 원하는 숫자 값 tension 0 과 0.3 값 차이 큰 값을 주면 왜곡이 심해지니 주의!

 

이렇게 위에서 차트 그림으로 본 옵션들 빼고 나머지 옵션들 중 일부를 정리해보았는데요,

 

point 는 라인의 데이터 지점에 관련된 것들이고,

pointHover 은 hover 했을 때라고 생각하면 공식 문서를 읽기 더 수월할 것 같아요.

 

사실 특별한 경우가 아니면 이 data 에서 라인들의 옵션을 바꿀 일은 많이 없을 것 같아요,

 

예시들은 다 데이터들을 하나하나 설정해주고 있지만, 실제로는 여러 가지의 데이터를 서버와 통신해서 받아오잖아요?

제가 애먹었던 것은 ㅠㅠ 한 줄 라인이 아닌 여러 개의 라인을 어떻게 설정해줘야 하느냐 였어요

 

// exampleData.json

{
  "months": ["1월", "2월", "3월", "4월", "5월"],
  "teams": [
    {
      "teamName": "Team A",
      "score": [1, 3, 2, 4, 2],
      "borderColor": "#ff6384"
    },
    {
      "teamName": "Team B",
      "score": [2, 1, 3, 2, 3],
      "borderColor": "#36a2eb"
    },
    {
      "teamName": "Team C",
      "score": [5, 4, 4, 1, 1],
      "borderColor": "#ffce56"
    }
  ]
}

 

예시 데이터를 생성해줍니다!

 

Scoregraph 라는 컴포넌트를 하나 만들어주었어요 위에 적은것처럼 import 해주고 이렇게 작성했습니다

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

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

function Scoregraph({ graphData }) {
  
  return(
    <>
      <Line options={options} data={graphData} />
    </>
  );
}

export default Scoregraph;

 

그리고 graphData 는 Scoregraph 를 사용하는 상위 컴포넌트에서 정의해준 뒤 prop 으로 전달해주었습니다.

 

  const graphData = {
    labels: exampleData.months,
    datasets: exampleData.teams.map(team => ({
      label: team.teamName,
      data: team.score,
      borderColor: team.borderColor,
      tension: 0.1,
    }))
  };

 

teams 의 정보를 map 돌려서 각각 맞는 데이터에 집어넣어 줬습니다!

당연한 이야기겠지만 json 형태를 보면서 넣어주면 쉽습니다

왼 : 기본 디자인 / 오른 : options 설정한 디자인

 

구현된 화면은 이렇습니다

일일히 데이터를 추가하는 것이 아니라 서버에서 데이터가 추가되어도 알아서! 잘 렌더링 되겠죠 이제 ~ 

 

다음 포스팅에서는 왼쪽의 기본 디자인을 오른쪽처럼 꾸미려면 어떻게 해줘야하는지!!! options prop 에 대해 포스팅해보겠습니다

 

읽어주셔서 감사합니다 ㅎㅎ🙇🏻‍♀️🖐🏻