4.1 소개

4장에서는 React와 Chart.js를 사용하여 다양한 유형의 차트를 만드는 방법을 설명한다. 각 차트 유형에 대한 예제와 함께 축 설정, 애니메이션, 컬러 설정, 데이터 처리 등의 공통 기능에 대해서 다루게된다. 이 책에서는 간단하게 사용하는 내용으로 작성되어 있기 때문에 좀 더 많은 예제를 보고 싶으면 Chart.js의 Samples(https://www.chartjs.org/docs/latest/samples/information.html)를 참고하면 좋다.

React에서 Chart.js를 함께 사용할 때는 보통 'react-chartjs-2' 라이브러리를 사용한다. 이 라이브러리는 Chart.js를 React 컴포넌트로 래핑한 것이다.

<aside> 💡 chart.js의 커뮤니티

• Join the community on Discord(https://discord.gg/HxEguTK6av)and Twitter(https://twitter.com/chartjs)

• Youtube

  Chart JS

</aside>

차트에 대한 설명을 들어가기 전 먼저 필요한 패키지를 설치한다.

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

# yarn
yarn install react chart.js react-chartjs-2

# pnpm
pnpm install react chart.js react-chartjs-2

4.2 차트 사용법

다음 장에서 소개할 <AreaChart /> 컴포넌트 코드를 사용하여 차트를 사용하는 방법에 대해 알아보겠다.

1. 라이브러리 임포트

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

   • react-chartjs-2에서 <Line /> 컴포넌트를 가져온다. 이는 리액트에서 선 그래프를 그리는 데 사용한다.
   • chart.js에서 여러 모듈을 가져온다. 이는 차트의 다양한 기능과 스타일을 정의하는 데 필요하다.

2. 차트 등록

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

   • 사용할 차트 기능들을 등록한다. 이는 차트가 제대로 작동하고 그래프의 요소들을 나타내기 위해 필요하다.

3. AreaChart 컴포넌트 정의

   const AreaChart = () => { ... };
   

   • 차트를 표시할 리액트 컴포넌트를 정의한다.

4. 데이터 설정

   const data = { ... };
   

   • 차트에 표시될 데이터를 정의한다. 여기에는 x축 라벨(월)과 y축 데이터(숫자 값)와 같은 데이터가 포함된다.

5. 옵션 설정

   const options = { ... };
   

   • 차트의 반응형 여부, 범례 위치, 제목 등의 옵션을 설정한다.

6. 차트 렌더링

   return <Line options={options} data={data} />;
   

   • Line 컴포넌트처럼 Chart 컴포넌트를 사용하여 차트를 렌더링한다. 옵션과 데이터를 props로 전달합니다.

7. 컴포넌트 내보내기

   export default AreaChart;
   

   • 정의한 AreaChart 컴포넌트를 내보내어 다른 파일에서 사용할 수 있다.

4.3 차트 유형