[React] ApexCharts 사용 방법

ApexCharts는 데이터를 시각화해주는 차트 라이브러리입니다. 무료로 사용할 수 있고, Js, Angular, React, Vue를 지원합니다. ApexCharts를 사용하여 React.js 에서 간단하게 차트 만드는 방법에 대해 알아보겠습니다.

설치

apexcharts 와 react-apexcharts 라이브러리를 같이 설치합니다.

$ npm install --save react-apexcharts apexcharts

사용

코인 정보를 조회하여 차트를 구성하였습니다. Line Chart를 예제로 사용하였습니다.

// api.ts
const BASE_URL = `https://api.coinpaprika.com/v1`;

// 코인 정보 조회
export function fetchCoinHistory(coinId: string) {
  const endDate = Math.floor(Date.now() / 1000);
  const startDate = endDate - 60 * 60 * 23; // 하루치 조회
  return fetch(`${BASE_URL}/coins/${coinId}/ohlcv/historical?start=${startDate}&end=${endDate}`).then((reponse) =>
    reponse.json()
  );
}

https://apexcharts.com/docs/options/# 페이지를 참고하여 옵션을 커스텀합니다. 테마, x축, y축, 색상, 툴바 감추기, 크기, 툴팁 설정 등 세세한 부분까지 커스텀할 수 있습니다.

// Chart.tsx
import { useQuery } from 'react-query';
import { useOutletContext } from 'react-router';
import { fetchCoinHistory } from '../api';
import ApexChart from 'react-apexcharts';

interface IHistorical {
  time_open: string;
  time_close: string;
  open: number;
  high: number;
  low: number;
  close: number;
  volume: number;
  market_cap: number;
}

function Chart() {
  const coinId = useOutletContext() as string;
  const { isLoading, data } = useQuery<IHistorical[]>(['ohlcv', coinId], () => fetchCoinHistory(coinId));
  return (
    <div>
      {isLoading ? (
        'Loading chart...'
      ) : (
        <ApexChart
          type="line"
          series={[
            {
              name: 'Price',
              data: data?.map((price) => price.close) as number[],
            },
          ]}
          options={{
            theme: {
              mode: 'dark',
            },
            chart: {
              height: 300,
              width: 500,
              toolbar: {
                show: false,
              },
              background: 'transparent',
            },
            grid: {
              show: false,
            },
            stroke: {
              curve: 'smooth',
              width: 4,
            },
            yaxis: {
              show: false,
            },
            xaxis: {
              type: 'datetime',
              categories: data?.map((price) => price.time_close),
              labels: {
                style: {
                  colors: '#9c88ff',
                },
              },
            },
            fill: {
              type: 'gradient',
              gradient: {
                gradientToColors: ['blue'],
                stops: [0, 100],
              },
            },
            colors: ['red'],
            tooltip: {
              y: {
                formatter: (value) => `$${value.toFixed(2)}`,
              },
            },
          }}
        />
      )}
    </div>
  );
}

export default Chart;

참고

• https://apexcharts.com/docs/react-charts/
• https://apexcharts.com/docs/options/#
• https://api.coinpaprika.com/#tag/Coins/paths/~1coins~1{coin_id}~1ohlcv~1historical/get