apexcharts

APEXCHART는 데이터를 시각 화 해주는 차트 라이브러리로 관리자 페이지 작업 시 많이 사용해서 사용법에 대해 정리해보자 한다.

apexcharts 사이트

https://apexcharts.com/

ApexCharts.js - Open Source JavaScript Charts for your website

 

React에서 사용 시

npm install --save react-apexcharts apexcharts

 

 

적용하고 자 하는 페이지에 import

Next.js 에서는 apexcharts import시 window is not defined 에러가 나온다.

NEXT JS에서는 ssr 방식으로 작동하기 때문에, window 객체를 이용한 옵션들은 dynamic 으로 불러와야 해결된다.

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

 

import dynamic from "next/dynamic";
const ApexCharts = dynamic(() => import("react-apexcharts"), { ssr: false });
import { ApexOptions } from "apexcharts";
import { colors } from "@/styles/Color";

export default function Test() {
  const state: ApexOptions = {
    series: [
      {
        name: "데이터 내용",
        data: [200, 100, 50, 80, 75, 200, 100],
      },
    ],
  };

  const options: ApexOptions = {
    theme: {
      mode: "dark",
    },
    chart: {
      type: "line",
      zoom: {
        enabled: false,
      },
      background: "transparent",
      foreColor: colors.text,
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "smooth",
      width: 3,
    },
    colors: ["#db840b"],
    grid: {
      row: {
        colors: ["transparent", "transparent"],
        opacity: 0.5,
      },
    },
    yaxis: { tickAmount: 3, min: 0 },
    xaxis: {
      categories: ["25", "50", "75", "100", "125", "150", "175"],
    },
  };

  return (
    <>
      <ApexCharts
        options={options}
        series={state.series}
        type="line"
        width={"95%"}
        height={"88%"}
      />
    </>
  );
}

 

 

코드에 적용되어진 속성 정리

type : 차트 모양 지정

series : data 값

options :

• 테마

theme: { mode: "dark"}

 

• 차트

chart: {
      type: "line",
      zoom: {
        enabled: false,
      },
      background: "transparent",
      foreColor: colors.text
}

type : 차트 유형

zoom : 차트 확대

background : 차트 배경 색상

foreColor : 차트 텍스트 색상

 

• dataLabels

dataLabels: { enabled: false }

enabled : dataLabels 표시 여부

 

• stroke

stroke: {
      curve: "smooth",
      width: 3,
}

curve : 선/영역 차트에서 부드러운 선을 그릴지 직선을 그릴지 여부

width : 테두리 너비를 설정

 

• colors

colors: ["#db840b"]

colors : 차트 계열의 색상입니다. 배열의 모든 색상이 사용되면 처음부터 시작

 

• grid

grid: {
      row: {
        colors: ["transparent", "transparent"],
        opacity: 0.5,
      },
}

colors : 행 패턴을 채우는 그리드 배경 색상

opacity : 행 배경색의 불투명도

 

• yaxis

yaxis: { tickAmount: 3, min: 0 }

tickAmount : 표시할 틱 간격 수

min : y축에 설정할 가장 낮은 

 

• xaxis

xaxis: {
      categories: ["25", "50", "75", "100", "125", "150", "175"],
}

categories : X축에 표시되는 라벨

 

그 외 css 적용

.apexcharts-menu {
      border: 1px solid #404c63;
    }

    .apexcharts-menu.apexcharts-menu-open {
      background-color: #404c63;

      .apexcharts-menu-item {
        background-color: #404c63;

        &:hover {
          background: ${colors.pointColor};
        }
      }
    }

    .apexcharts-tooltip,
    .apexcharts-tooltip-title,
    .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom {
      background-color: #404c63 !important;
      border: none;
    }

    .apexcharts-xaxistooltip-text {
      color: #fff;
    }

 

 

.apexcharts-menu : 차트 다운로드 하는 버튼 클릭 시 나오는 모달

 

.apexcharts-tooltip / .apexcharts-tooltip-title / .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom : 차트 데이터 호버 시 나오는 툴팁

 

.apexcharts-xaxistooltip-text : x 축 텍스트 색상

 

최종