리액트 차트 라이브러리 | create-react-app | react-chartjs-2

 

리액트를 사용해 차트를 표시할 수 있는 라이브러리의 종류는 무척 다양합니다. 여기에서는 그 중에서도 사용이 간편하고 많은 분들에게 비교적 친숙할 만한 라이브러리를 사용해보도록 하겠습니다. 자바스크립트나 제이쿼리를 학습하시는 분들이 많이 사용하시는 차트 라이브러리 중에 Chart.js라는 것이 있습니다. 여기에서 사용해볼 리액트 라이브러리인 react-chartjs-2는 Chart.js의 리액트 래퍼라고 소개되어 있는 라이브러리로써, 쉽게 말해 Chart.js를 통해 그려진 차트를 리액트 앱으로 렌더링할 수 있도록 해주는 라이브러리라고 할 수 있습니다. 따라서 차트를 표시하는 데 필요한 기본적인 방법이나 흐름은 기존 Chart.js의 방식과 별반 다르지 않습니다. 

 

그럼 라이브러리를 사용하기에 앞서 설치를 먼저 진행하도록 하겠습니다. create-react-app을 기반으로 진행한다고 가정하고 예제 작성을 진행하겠습니다. 설치 명령어는 다음과 같습니다.

npm install react-chartjs-2 chart.js

 

그 다음은 프로젝트 폴더의 src 폴더 안에, MyChart.js 라는 이름의 파일을 만들고 그 안에 클래스형 컴포넌트를 작성하도록 하겠습니다.

import React from 'react'
import { Bar } from 'react-chartjs-2'
 
class MyChart extends React.Component{
  render(){
    return <div style={{width:400}}>
    </div>
  }
}
 
export default MyChart;

Chart.js를 사용해보신 분들은 이미 아시다시피, 제공되는 차트의 종류는 무척 다양합니다. 여기에서는 그 중에서도 무난한 형태라고 볼 수 있는 Bar chart를 사용해보도록 하겠습니다(필요하다면 추후 다른 차트에 대한 예제를 게시할 예정). 위 코드에서는 Chart.js에서 제공하는 Bar 차트를 컴포넌트 형태로 제공받았습니다. 이를 렌더링하기 위한 기본형은 다음과 같습니다.

<Bar
  data={data}
  options={options}
  height={300}
/>

Bar 컴포넌트에는 여러 속성이 존재하는데, data는 차트를 통해 표시할 데이터이고, options는 각종 선택사항에 대한 설정값입니다. 그리고 height는 차트의 높이를 지정하고 싶을 때 사용합니다. width는 기본적으로 100%로 적용되기 때문에, 부모 DOM 객체의 크기로 조절할 수 있습니다(여기서는 400px). 

그럼 이제 data와 options의 값을 확인해 볼 것인데, 이는 기존의 chart.js 문서에서 달라진 부분이 없습니다. 따라서 자세한 내용은 웹문서를 참고하시는 걸로 하고(양이 많아 그러는 수밖에 없습니다), 여기서는 코드에 있는 주석으로 설명을 대신하도록 하겠습니다. 

const options = {
  legend: {
    display: false, // label 보이기 여부
  },
  scales: {
    yAxes: [{
      ticks: { 
        min: 0, // y축 스케일에 대한 최소값 설정
        stepSize: 1, // y축 그리드 한 칸당 수치
      }
    }]
  },
 
  // false : 사용자 정의 크기에 따라 그래프 크기가 결정됨.
  // true : 크기가 알아서 결정됨.
  maintainAspectRatio: false 
}
const data = {
  // 각 막대별 라벨
  labels: ['1번 막대', '2번 막대', '3번 막대'],
  datasets: [
    {
      borderWidth: 1, // 테두리 두께
      data: [1,2,3], // 수치
      backgroundColor:['yellow','red','green'] // 각 막대 색
    }
  ]
};

위 객체들을 컴포넌트에 적용하고 나면 기본적인 차트의 모양은 갖추어집니다. 그럼 이제 결과를 보이면서 마무리하도록 하겠습니다. 

 

참고로 Bar 차트가 아닌 기타 차트의 결과물을 보고 싶다거나 코드를 직접 작성해보고 싶으신 경우에는, 아래의 링크로 이동하시면 참고 자료를 확인하실 수 있습니다. 

여기를 클릭(라이브러리 샘플 소개)

감사합니다.