[React] 그래프 라이브러리 쓰기 (ApexChart)

사용한 라이브러리

https://apexcharts.com/docs/react-charts/

React-ApexChart - A React Chart wrapper for ApexCharts.js

https://apexcharts.com/javascript-chart-demos/column-charts/column-with-markers/

JavaScript Column Chart with Markers – ApexCharts.js

---

사용 방법

1. 설치하기  npm install apexcharts --save

https://apexcharts.com/docs/installation/ 

Installation & Getting Started – ApexCharts.js

 

2. 코드 

import ApexCharts from "apexcharts";
import Chart from "react-apexcharts";

const Chart = () => {
	// 데이터
	 let options_Risk = {
    chart: {
      type: "bar",
      width: "5rem",
    },
    colors: ["#e5cd85"],
  };
  let series_Risk = [
    {
      name: "발암위해도",
      data: [
        {
          x: chem_1,
          y: Risk_1,
          width: 10,
          goals: [
            {
              name: "기준치",
              value: 0.000001,
              strokeColor: "rgb(141, 0, 42)",
            },
          ],
        },
        {
          x: chem_2,
          y: Risk_2,
          goals: [
            {
              name: "기준치",
              value: 0.000001,
              strokeColor: "rgb(141, 0, 42)",
            },
          ],
        },
        {
          x: chem_3,
          y: Risk_3,
          goals: [
            {
              name: "기준치",
              value: 0.000001,
              strokeColor: "rgb(141, 0, 42)",
            },
          ],
        },
        {
          x: chem_4,
          y: Risk_4,
          goals: [
            {
              name: "기준치",
              value: 0.000001,
              strokeColor: "rgb(141, 0, 42)",
            },
          ],
        },
        {
          x: chem_5,
          y: Risk_5,
          goals: [
            {
              name: "기준치",
              value: 0.000001,
              strokeColor: "rgb(141, 0, 42)",
            },
          ],
        },
      ],
    },
  ];
  
  return (
  	<>
    	<Chart
                  options={options_Risk}
                  series={series_Risk}
                  type="bar"
                  width="60%"
                />
    </>
  )
}