[React] ApexCharts 사용 방법

ApexCharts는 데이터를 시각화해주는 차트 라이브러리입니다. 무료로 사용할 수 있고, Js, Angular, React, Vue를 지원합니다.
ApexCharts를 사용하여 React.js 에서 간단하게 차트 만드는 방법에 대해 알아보겠습니다.

설치

apexcharts 와 react-apexcharts 라이브러리를 같이 설치합니다.

1
$ npm install --save react-apexcharts apexcharts

사용

코인 정보를 조회하여 차트를 구성하였습니다. Line Chart를 예제로 사용하였습니다.

1
2
3
4
5
6
7
8
9
10
11
// api.ts
const BASE_URL = `https://api.coinpaprika.com/v1`;

// 코인 정보 조회
export function fetchCoinHistory(coinId: string) {
const endDate = Math.floor(Date.now() / 1000);
const startDate = endDate - 60 * 60 * 23; // 하루치 조회
return fetch(`${BASE_URL}/coins/${coinId}/ohlcv/historical?start=${startDate}&end=${endDate}`).then((reponse) =>
reponse.json()
);
}

https://apexcharts.com/docs/options/# 페이지를 참고하여 옵션을 커스텀합니다.
테마, x축, y축, 색상, 툴바 감추기, 크기, 툴팁 설정 등 세세한 부분까지 커스텀할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// Chart.tsx
import { useQuery } from 'react-query';
import { useOutletContext } from 'react-router';
import { fetchCoinHistory } from '../api';
import ApexChart from 'react-apexcharts';

interface IHistorical {
time_open: string;
time_close: string;
open: number;
high: number;
low: number;
close: number;
volume: number;
market_cap: number;
}

function Chart() {
const coinId = useOutletContext() as string;
const { isLoading, data } = useQuery<IHistorical[]>(['ohlcv', coinId], () => fetchCoinHistory(coinId));
return (
<div>
{isLoading ? (
'Loading chart...'
) : (
<ApexChart
type="line"
series={[
{
name: 'Price',
data: data?.map((price) => price.close) as number[],
},
]}
options={{
theme: {
mode: 'dark',
},
chart: {
height: 300,
width: 500,
toolbar: {
show: false,
},
background: 'transparent',
},
grid: {
show: false,
},
stroke: {
curve: 'smooth',
width: 4,
},
yaxis: {
show: false,
},
xaxis: {
type: 'datetime',
categories: data?.map((price) => price.time_close),
labels: {
style: {
colors: '#9c88ff',
},
},
},
fill: {
type: 'gradient',
gradient: {
gradientToColors: ['blue'],
stops: [0, 100],
},
},
colors: ['red'],
tooltip: {
y: {
formatter: (value) => `$${value.toFixed(2)}`,
},
},
}}
/>
)}
</div>
);
}

export default Chart;

참고

Share