(최근에 만든 코인거래소 클론코딩)

👻근황

최근 리액트(+타입스크립트) 공부를 시작했습니다. 여태까지 HTML, SCSS, JS 이렇게 3개로 분리해서 마크업→스타일→스크립트 순으로 작업했었는데 이제는 컴포넌트를 기준으로 한 파일 안에 마크업부터 스타일, 스크립트까지 다 작성하니.. 편한 듯 하면서 불편하네요ㅎㅎ 암튼 리액트 클론코딩을 하다가 APEXCHART라는 멋있는 라이브러리를 알게 되어서 정리 겸 블로그에 공유해봅니다.

👻APEXCHART 소개

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

APEXCHART는 데이터를 시각화 해주는 차트 라이브러리입니다. 선 그래프, 거품형, 타임라인, 히트맵까지 다양한 스타일들이 있고, 반응형에 커스텀 기능까지 구현되어 있습니다. MIT 라이센스를 받은 오픈 소스라서 상용 어플리케이션에서도 무료로 사용할 수 있다고 합니다~😍 저같은 초보들도 쉽게 다룰 수 있다는 장점이 있어요😄

(데모 페이지에 들어가면 이것보다 훨씬 많은 스타일들을 보실 수 있습니다.)

참고로 이 포스트에서는 candlestick(주식 차트st) 스타일을 사용했습니다^^

👻설치

npm 설치 ㄱㄱ

npm install apexcharts --save

파일에 임포트 해주세요

import ApexChart from 'apexcharts'

return (
	<div>
  		<ApexChart />
	</div>
)

그냥 컴포넌트처럼 쓰면 됩니다. 참 쉽죠?

👻사용방법

APEXCHART는 친절하게도 여러 예제 코드를 제공하고 있습니다.