Moostock(5) - Next.js 캔들스틱 그래프 그리기 (APEXCHARTS)

이제 주식에 일봉이나 주봉등을 캔들스틱 차트로 보여주는 걸 하려고 한다

 

구글링 해서 apexcharts 라는 라이브러리를 찾았다

ApexCharts.js - Open Source JavaScript Charts for your website

이미 유명해서 참고할만한 자료들도 많은거 같다

 

일단 샘플데이터를 넣어서 그래프가 그려지는지만 확인하고 싶었다

 

그냥 하라는대로 하면 잘 될줄알았는데 문제가 꽤나 많이 발생했다

 

에러가 많이나서 순서는 기억이 잘 안나서

 

주요 에러와 최종 코드만 보여주겠다

 

일단 설치는

npm install react-apexcharts apexcharts

이걸 하면 되고 그냥 공식문서 보면서 따라하려 했는데 아주 많은 에러가 발생했다

 

- Error: window is not defined

- TypeError: Cannot read properties of undefined (reading 'toString') apexchart

- ApexChart 은(는) JSX 구성 요소로 사용할 수 없습니다

- TypeError: Cannot read properties of undefined (reading 'type')

 

등등...

문제의 원인도 당연하게 여러가지인데

 

아직 정확한 원인은 설명할정도로 알지는 못해서 완성 코드만 보여주겠다

"use client";
import dynamic from "next/dynamic";
const ApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
export default function ChartPage({
  params: { label },
}: {
  params: { label: string };
}) {
  return (
    <div>
      <h1>라벨 : {label}</h1>
      <ApexChart
        type="candlestick"
        series={[
          {
            data: [
              [1538856000000, 6593.34, 6600, 6582.63, 6600],
              [1538856900000, 6595.16, 6604.76, 6590.73, 6593.86],
            ],
          },
        ]}
        width={700}
        height={500}
        options={{
          theme: {
            mode: "dark",
          },
          chart: {
            toolbar: {
              tools: {},
            },
            background: "transparent",
          },
          grid: {
            show: false,
          },
        }}
      />
    </div>
  );
}

뭐 여기저기서 긁어와서 덕지덕지 붙여서 이렇게 됐다

 

쨋든 

이렇게 그래프가 에러 없이 그려지긴 했따 ㅎ...

 

이제 그래프도 그리기를 성공했으니 진짜 데이터를 가져와서 그래프로 보여주는걸 성공하고 돌아오겠다!!