[ React ] apexchart

🔴  Introduction

⚪  React 뿐만 아니라, Vanilla js, Angular, Vue 프레임워크에서 지원되는 Chart를 그리는 라이브러리

 

🟠  Official

Installation & Getting Started – ApexCharts.js

 

🟡  Install

 

npm i react-apexcharts apexcharts

 

🟢  Usage

 

// [ Usage Component ]
import ApexChart from "react-apexcharts";

const Chart = () => {
  return (
    <ApexChart
      type="line"
      series={[
        {
          name: "Price",
          data: data?.map((price) => price.close) ?? [],
        },
      ]}
      options={{
        theme: {
          mode: isDark ? "dark" : "light",
        },
        chart: {
          height: 300,
          width: 500,
          toolbar: {
            show: false,
          },
          background: "transparent",
        },
        grid: { show: false },
        stroke: {
          curve: "smooth",
          width: 4,
        },
        yaxis: {
          show: false,
        },
        xaxis: {
          axisBorder: { show: false },
          axisTicks: { show: false },
          labels: {
            show: false,
            datetimeFormatter: {
              month: "MMM 'yy",
            },
        },
          type: "datetime",
          categories: data?.map((price) => price.time_close),
        },
        fill: {
          type: "gradient",
          gradient: { gradientToColors: [theme.chartStart], stops: [0, 100] },
        },
        colors: [theme.chartEnd],
        tooltip: {
          y: {
            formatter: (value) => `$${value.toFixed(2)}`,
          },
        },
      }}
    />
  );
}