백오피스 프로젝트 도중
데이터를 시각화하는 역할을 담당하게 되었는데,
예전에 사용한 차트라이브러리를 사용하고자 했다.

Apexcharts

링크
선택 이유는 예전에 사용했을때 커스텀하기 편했고, 디자인이 매우 깔끔하다고 생각이 들어서 다시 이녀석을 선택했다.

설치

npm install apexcharts --save

설치 후 파일을 import 하여 컴포넌트 처럼 사용할 수 있다.

import ApexChart from 'apexcharts'
return (
  	<ApexChart />
)

그런데 NEXT JS 에서는 위와같이 설치하면 오류가 발생하는데,

window is not defined

에러가 발생하는데,

해결방안

NEXT JS 에서는 window 함수를 사용하려면 몇가지 조건을 추가해야하는데...
type of, useEffect, dynamic 을 이용해야한다.
Apexcharts 라이브러리에서는 window 객체를 사용해야해서 에러가 발생하기때문에

나는 dynamic을 사용하여 해결했다.

import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

return (
  	<Chart />
)

dynamic을 이용하여 적용하니 아래와 같이 잘 나오는것을 볼 수 있다.
커스텀 하는곳은
https://apexcharts.com/javascript-chart-demos/bar-charts/custom-datalabels/#
이곳에서 찾아볼 수 있다.

결론

NEXT JS에서는 ssr 방식으로 작동하기때문에, window 객체를 이용한 옵션들은 위와같이 해결 할 수 있고,
개인적으로 차트 라이브러리는 아주 다양하지만 apecxCharts도 굉장히 매력적인 라이브러리라고생각한다.