[ApexChart] React+TS에서 ApexChart 사용하기

import { t } from "i18next";
import React from "react";
import Chart from "react-apexcharts";

function TempertureGraph() {
  const series: ApexAxisChartSeries | ApexNonAxisChartSeries | undefined = [
    {
      name: "",
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
    },
    {
      name: "",
      data: [20, 30, 40, 50, 60, 70, 80, 90, 100],
    },
    {
      name: "",
      data: [5, 15, 25, 35, 45, 55, 65, 75, 85],
    },
    {
      name: "",
      data: [90, 80, 70, 60, 50, 40, 30, 20, 10],
    },
    {
      name: "",
      data: [70, 60, 50, 40, 30, 20, 10, 5, 15],
    },
    {
      name: "",
      data: [40, 50, 60, 70, 80, 90, 100, 90, 80],
    },
    {
      name: "",
      data: [15, 25, 35, 45, 55, 65, 75, 85, 95],
    },
    {
      name: "",
      data: [50, 40, 30, 20, 10, 5, 15, 25, 35],
    },
  ];
  const options: ApexCharts.ApexOptions = {
    colors: ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#FFD92F", "#A65628", "#F781BF"],
    chart: {
      // 구간확대 비활성화
      zoom: {
        enabled: false,
      },
      // download 버튼 비활성화
      toolbar: {
        show: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
      width: 3,
    },
    xaxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
    },
    legend: {
      show: false,
    },
    grid: {
      show: series.length !== 0,
    },
    noData: {
      text: "정보없음",
      style: {
        fontSize: "18px",
      },
    },
    states: {
      hover: {
        filter: {
          type: "lighten",
          value: 0.15,
        },
      },
    },
    tooltip: {
      shared: false,
    },
  };
  return (
    <div>
      <Chart type="line" width={"100%"} height={400} series={series} options={options} />
    </div>
  );
}

export default TempertureGraph;

 

암튼 타입이 문제여..