ApexChart

리액트에서 Apexchart를 이용하기 위해 설치를 해주자
npm install react-apexcharts apexcharts

import ApexCharts from 'react-apexcharts'

...
	return (
      <div>
        <ApexCharts 
      		// type : 차트의 유형
			type: 'line'
      		// 차트에 표시하려는 데이터 (Array)
      		series: {[
      			{
      				name: "data",
                    // 만약 동적 데이터를 받는다면 아래처럼 표현 가능.
                    // data: data?.map(price => price.close) as number[]
      				data: [1, 2, 3, 4, 5]
      			}
      		]}
            // 차트의 구성 옵션 (Object) ( 기본값 {})
            options={{
            	theme: {
                     mode: "dark"
                },
                chart: {
                 	width: 500,
                    height: 500
                }
            }}
		/>
      </div>)

좋은 웹페이지 즐겨찾기