[React] react-chartjs-2 라이브러리 사용방법

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

react-chartjs-2 | react-chartjs-2

 

리액트 차트 라이브러리로 사용할 것을 고민중,

자바스크립트 기반인  chartjs를 React로 쓸 수 있는 react-chartjs-2 라이브러리가 있다고 하여 이것을 사용하기로 했다.

React 스러운 라이브러리 중에서 고민했다.

Nivo는 다 좋은데..아쉽게도 혼합된 차트를 제공하지 않아서 일단 패스, D3는.. 진입장벽이 느껴졌고, Apexcharts, Recharts 도 마음에 들었으나 UI적인 부분에서는 Chartjs가 더 맘에 들어서 선택했다. 

다양한 차트 라이브러리 추천은 참고사이트 여기 잘 나와있다.

 

---

 

 react-chartjs-2 사용방법은 다음과 같다.

 

1. 설치

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

 

2. 사용

Examples 에서 사용하면 된다. (예시로 아래 LineChart, BarChart를 가져옴)

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

Examples | react-chartjs-2

 

 

 (예시로 아래 LineChart, BarChart를 가져옴)

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

Line Chart | react-chartjs-2

 

 

https://react-chartjs-2.js.org/examples/vertical-bar-chart

Vertical Bar Chart | react-chartjs-2

 

 

(이건  react꺼아니고 chart.js꺼인데 참고용)

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

Getting Started | Chart.js

 

* Examples 누르면 다양한 예시 코드가 있어서 거기서 data만 건들여주면 된다.

 

예시로 있는 Line Chart 를 사용하였다.

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

//기본 Line 차트
//https://react-chartjs-2.js.org/examples/line-chart

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);
export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top' as const,
    },
    title: {
      display: true,
      text: 'Chart.js Line Chart',
    },
  },
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; //x축 기준

export const data = {
  labels,
  datasets: [
    {
      label: '분류 1', //그래프 분류되는 항목
      data: [1, 2, 3, 4, 5, 6, 7], //실제 그려지는 데이터(Y축 숫자)
      borderColor: 'rgb(255, 99, 132)', //그래프 선 color
      backgroundColor: 'rgba(255, 99, 132, 0.5)', //마우스 호버시 나타나는 분류네모 표시 bg
    },
    {
      label: '분류 2',
      data: [2, 3, 4, 5, 4, 7, 8],
      borderColor: 'rgb(53, 162, 235)', //실제 그려지는 데이터(Y축 숫자)
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
    },
  ],
};

export default function LineChart() {
  return (
    <div className='contentWrap'>
      <div className='contentInner'>
        <Line options={options} data={data} />
      </div>
    </div>
  );
}

Bar 컴포넌트에 필요한 것들을 chart.js에서 import 해주고 해당 options 등을 설정해준다. 이런건 다 기본 예제에 있는 코드를 사용했다.

그리고 주로 변경하는 것들은 data-datasets의 labels, data 부분이다.

labels: X축 기준 항목들

data: Y축 기준 데이터 숫자들

 

아래는 BarChart 예시

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

//기본 Bar 차트
//https://react-chartjs-2.js.org/components/bar

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

export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top' as const,
    },
    title: {
      display: true,
      text: 'Chart.js Bar Chart',
    },
  },
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

export const data = {
  labels,
  datasets: [
    {
      label: '분류 1',
      data: [1, 2, 3, 4, 5, 6, 7],
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
    },
    {
      label: '분류 2',
      data: [2, 3, 4, 5, 4, 7, 8],
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
    },
  ],
};

export default function BarChart() {
  return (
    <div className='contentWrap'>
      <div className='contentInner'>
        <Bar options={options} data={data} />
      </div>
    </div>
  );
}

 

 

참고)

react에서 chart.js 사용해보기 📊📉

 

Chart.js 시작하기