<aside> ✨

사이트 바로가기 : https://apexcharts.com/

</aside>

1. 라이브러리 다운

npm install --save react-apexcharts apexcharts

2. 코드 예시

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: 원하는 차트 유형 (line, area, bar 등등)

series: 보여주고자 하는 data

options: 원하는 style 지정

• theme

theme: { mode: "dark"}

• chart

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

type: 차트 유형

zoom: 차트 확대

background: 차트 배경 색상