프론트엔드에서 차트 정보를 표현하기 위해 사용가능한 라이브러리들은 많지만
가장많이 사용한 라이브러리인 rechart는 입사 과제테스트로 구현해본 경험이 있어
다른 라이브러리를 이용해 보고 싶었는데, 제일 깔끔하고 사용하기 간편해보이는 ApexChart를 골랐다.

ApexChart

먼저, https://apexcharts.com/ 해당 링크로 이동하면 사용중인 프레임워크를 골라서 사용할 수 있다.

사용중인 프레임워크 탭에서 원하는 그래프를 골라주면

이런식으로 코드와 출력형태를 보여주는데 rechart에 비해 아쉬운게 한가지 있다면
디자인이나 코드 형태는 비슷하지만 rechart는 web IDE를 제공하여 데이터값이나 옵션들을 변경하고
실시간으로 직접 달라지는 값들을 확인이 가능한데 ApexChart에는 그런게 없어서 아쉽다.

이제 바로 적용시켜보자

설치

npm install apexcharts --save

적용

import Chart from "react-apexcharts";

interface SalesData {
  todaySales: number;
  today: string;
}


const SalesBoard = () => {
  const { data, isLoading } = useQuery<SalesData[]>(
    ["getSalesData"],
    async () => {
      const response = await api.get("cal/v1/function/sales");
      console.log(response.data);
      return response.data.body.function;
    }
  );

  const chartData: any = {
    series: [
      {
        name: "Sales",
        data: data?.map((item) => item.todaySales), //Y축 데이터(Price)
      },
    ],
    options: {
      chart: {
        zoom: {
          enabled: false,  // 그래프 상단 Toolbar - 확대기능
        },
        toolbar: {
          show: false,    // 그래프 상단 Toolbar
        },
        stroke: {
          curve: "smooth", // 차트 선 모양 
        },
      },

      xaxis: {
        categories: data?.map((item) => item.today), //X축 데이터(Date)
      },
    },
  };
  return isLoading ? (
    <Loading />
  ) : (
    <>
      <Chart
        options={chartData.options}
        series={chartData.series as ApexAxisChartSeries}
        type="area"
        width="100%"
        height="450px"
      />
    </>
  );
};

export default SalesBoard;

코드를 보면 chartData 타입을 any로 지정해둔게 찝찝해 방법을 찾아봤는데
series의 ApexAxisChartSeries 처럼 ApexOptions를 제공해준다하여 적용시켜 보았으나,
vscode가 인식하지못하고 chartData.options 객체 안에서 지정해준 값들에서
타입에러가 발생해 어쩔수 없이 any로 지정해 두었다..

결과

잘 출력된다!!