[React Native] Chart 그리기 with react-native-svg-charts

React Native 프로젝트를 진행하며 Chart를 구현해야 해서

Chart를 사용하기 위한 준비 단계를 간략하게 정리하였습니다.

 

Chart를 그리기 위해 선택한 라이브러리는 'react-native-svg-charts'입니다.

 

우선 다운로드 수가 많은 ReactNative chart 라이브러리를 검색하여

주간 다운로드 수가 2만이 넘는 라이브러리를 선택하였고(victory-native, react-native-svg-charts)

그 중, Used by가 더 많고 간단하게 사용할 수 있어보이는 'react-native-svg-charts'를 선택하였습니다.

 

1. 사전 준비

1-1. 'react-native-svg'를 설치합니다.

>npm install react-native-svg

1-2. 설치한 'react-native-svg'를 link합니다.

>react-native link react-native-svg

 

2. 라이브러리 설치

>npm install react-native-svg-charts

 

3. 간단한 차트를 그리는 코드를 작성합니다.

 

import React from 'react';

import { BarChart, Grid } from 'react-native-svg-charts'

class App extends Component {
    
    render() {
        const fill = 'rgb(134, 65, 244)'
        const data = [50, 10, 40, 95, -4, -24, null, 85, undefined, 0, 35, 53, -53, 24, 50, -20, -80]

        return (
            <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
                <Grid />
            </BarChart>
        )
    }
}

export default App;

 

4. 동작 확인

앱에서 차트가 그려지는지 확인합니다.

정상적으로 동작하는 경우 아래 화면처럼 chart가 표시됩니다.

react-native-svg-charts