[React] Apexcharts js 사용후기

Apexcharts js는 여러 종류의 차트, 그래프를 사용자가 원하는 스타일로 꾸밀 수 있는 JavaScript 라이브러리이다.

React는 물론, Angular와 Vue도 지원한다.

 

** React 18 이후 버전에 대해서는 예시 코드가 없다. ( 18 버전 출시 후 한참이 됐는데도 감감무소식인걸 보니 제작자 쪽에서 업데이트에 대한 의지가 없어 보인다. )

사용법은 대충봐서 간단해 보였지만, 막상 사용하려니 잘 작동하지 않아서 chat-gpt3.5에게 물어보거나 구글링 하며 어찌어찌 완성할 수 있었다.

---

Main Page

Apex Chart 메인 페이지

---

Install

npm install react-apexcharts --save

사용하기 전 인스톨 해준다.

---

Import

import Chart from 'react-apexcharts';

export default function App() {
  
  return (
    <div>
      <Chart />
    </div>
  )
}

Chart라는 컴포넌트를 import한 후에 사용한다.

---

속성값 넣기

위와같이 Chart 컴포넌트를 써넣어도 차트가 '짠' 하고 바로 나오지는 않는다.

Chart 컴포넌트에는 엄청나게 많은 속성값이 존재하고, 그 속성값들을 하나하나 커스터마이징 해야만 비로소 나만의 멋진 Chart를 만들 수 있게 된다.

이 외에도 훨씬 더 많고 다양한 속성값들이 존재한다.

속성값에는 어떤 형식의 Chart를 선언할지, x축과 y축의 자료값, 수치값의 색상, 테마 등 무수히 많은 값들이 존재하기 때문에 직접 페이지에서 확인하는 편이 빠를 것 같다.

import Chart from 'react-apexcharts';

export default function App() {

  const series = [ // 데이터 값
    {
      name: "example data",
      data: [10,25,14,5,54]
    }
  ];
  const options = { // 각 데이터 카테고리
    chart: { id: 'bar-chart'},
    xaxis: {
      categories: ['Data1','Data2','Data3','Data4','Data5']
    }
  };
  
  return (
    <div>
      <Chart
        options={options}
        series={series}
        type="bar"
        width="450"
      />
    </div>
  )
}

 

 

위 코드의 결과

깔끔한 디자인의 Chart가 생성되었다.

 

만일 라이브러리의 도움을 받지 않고 쌩으로 코드를 짜야했다면 코드는 10배, 100배 이상 길어졌을지도 모른다.

오늘도 라이브러리 제작자들에게 감사하며, 글을 마친다.

---

https://apexcharts.com/