Chart.js 사용하기

개요

리액트에서 chart.js 사용하기

그래프 구현을 위해 chart.js 를 사용하면서, 처음 사용할 때 어려웠던 점. 불편했던 점을 정리

내가 어려웠던 점은 크게 3가지가 있었다.

1. 리액트에서 사용하기
2. Object 다루기
3. 그래프에 특정 색 할당하기

그럼 chart.js 의 기본 구조에 대해 정리하고, 위 3가지를 공유해보겠다.

기본 설정

chart.js : 3.9.1 버전

react-chartjs-2 : 4.3.1 버전

react-chartjs 라고 해도 기본적으로 chart.js 를 기반으로 하고 있다는 것을 잊지 말자.

• chart.js 의 기본 구조

const ctx = document.getElementById('myChart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ['#d9d9d9', '#d9d9d9', '#d9d9d9', 'red', ...],
      borderColor: "#FF0000",
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }   
  }
});

1. 넘겨줘야 하는 data 와 datasets, 추가적으로 설정할 수 있는 option 이 있다는 것을 알아두자.
2. data 의 value 는 ‘배열’ 을 갖는다. (labels, datasets, datasets.data)
3. backgroundColor/borderColor 등 몇몇 스타일 설정은 값이 문자열인 경우 일괄 적용, 배열인 경우 각각 적용된다.

• react-chartjs 사용

import { Bar } from 'react-chartjs-2';

const Chart = () => {
	const barData = {
		labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ['#d9d9d9', '#d9d9d9', '#d9d9d9', 'red', ...],
      borderColor: "#FF0000",
      borderWidth: 1
    }],
	}

	const barOption = {
		scales: {
      x: {
        grid: {
          display: false,
        },
      },
      y: {
        beginAtZero: true
      },
    },
	}

	return (
		<Bar data={barData} option={barOption} />
	)
}

1. 컴포넌트를 import 해야한다.
2. data와 option을 props 로 넘겨준다.

아래 사이트를 참고하면서 하시길…

Getting Started | Chart.js

Examples | react-chartjs-2

---

1. 리액트에서 사용하기

반드시 import 와 register 를 먼저 해주고 사용해야된다.

무언가 안되는 것이 있다면 import를 어떤 것을 해야하는지 찾아보자.

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Tooltip,
  Legend,
} from "chart.js";

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

나는 분명 문서와 똑같이 했는데, label 이 안나오고, tooltip 이 안나오고… 여러모로 안되는 기능들이 많았다.

그 모든게 import 를 안 해와서 일어난 일이다.

• chart.js label 안 나옴 → import Legend 추가
• chart.js tooltip 안 나옴 → import Tooltip 추가

기타 option 을 설정할 때는 react-chartjs-2의 example 문서를 잘 확인하길 추천한다.

2. Object 다루기

서버로 부터 받은 자료를 바탕으로 데이터를 보여주는 경우가 통상적일 것이다.

data에 배열로 된 객체를 할당하고

option 에 parsing 을 활용하면 편리하다.

const obj = [
	{
		a: "asd",
		b: "bsd",
		c: "csd",
		date: "2022-11-24",
	},
	{
		...
	},
	...
]

const data = {
	datasets: [
        {
          data: obj,
          backgroundColor: "#d9d9d9",
		},
	],
}

// object 의 key 값을 인자로 받으면 된다.
const options = (xAxisKey, yAxisKey) => {
        return {
            parsing: {
            xAxisKey, // 기준
            yAxisKey // 보여줄 데이터
        },
    }
}

return (
	<Bar data={data} option={option("date", "a")} />
)

위 그래프에서 날짜가 xAxisKey, 각각의 데이터가 yAxisKey 다.

3. 그래프에 특정 색 할당하기

위 그래프는 ‘가장 높은 값’ 만 색을 다르게 했다.

색 설정은 배열의 형태로 각각의 그래프 개수에 맞게 모두 색을 설정해주면 된다.

const onHighlightGraph = (key) => {
	// 사용하고자 하는 객체 리스트
  const objs = [{...}, {...}, {...}, ...]
	
	// 사용하고자 하는 key의 값들을 배열로 반환: [value1, value2, ...]
  const values = contents.map((item) => {
    return item[key];
  })

	// 그 중에서 가장 큰 값 찾기
  const maxValue = Math.max.apply(null, values);

	// 값 리스트를 돌면서 가장 큰 값과 일치하면 다른 색 할당
  const colors = values.map((value) => {
    if (value === maxValue) {
      return "#FD70A3"
    }
    return "#D9D9D9";
  })
  return colors; // ["#D9D9D9", "#D9D9D9", "#FD70A3", "#D9D9D9", ...]
}

return (
	<Bar data={onHighlightGraph("a")} option={option("date", "a")} />
)

더 나아가서, 나는 차트 여러개를 다른색으로 출력해 보았다.

const onHighlightGraph = (key) => {
  const objs = [{...}, {...}, {...}, ...]
  const values = contents.map((item) => {
    return item[key];
  })
  const maxValue = Math.max.apply(null, values);
  const colors = values.map((value) => {
    if (value === maxValue) {
      switch (key) {
        case "a":
          return "#00a8ee";
          break;
        case "b":
          return "#32A877";
          break;
        case "c":
          return "#FF0000";
          break;
        case "d":
          return "#FD70A3";
          break;
        case "e":
          return "#FB6F0B";
          break;
        default:
          return "#D9D9D9"
       }
    }
    return "#D9D9D9";
  })
  return colors; // ["#D9D9D9", "#D9D9D9", "#FD70A3", "#D9D9D9", ...]
}

return (
	<>
		<Bar data={onHighlightGraph("a")} option={option("date", "a")} />
		<Bar data={onHighlightGraph("b")} option={option("date", "b")} />
		<Bar data={onHighlightGraph("c")} option={option("date", "c")} />
	</>
)

---

마치며

사실 2번, 3번 보다 1번 문제를 해결하는데 힘들었다…

어이없는 실책같은 느낌..?

내가 사용하면서 불편했던 부분을 해결하는 과정이 다른 사람의 수고를 조금은 덜어줬으면 좋겠다.\

 

---

(+추가) 꺾은선 그래프 내부에 색 채우기

•  "Filler" 를 import 와 register 해준다.

import {
  ...,
  Filler
} from "chart.js";

ChartJS.register(..., Filler);

• datasets 에 fill 속성을 추가해준다. (fill: true)

datasets: [{
    ...,
    fill: true, // 채우기 설정
    borderWidth: 1, // 선 굵기
    backgroundColor: "#0000FF20", // 채우기 색
    radius: 1, // 포인트 크기
}],

참고

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

Getting Started | Chart.js

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

Examples | react-chartjs-2