React Native Svg Chart (react-native-svg-charts), React Native Chart

React Native 에서 사용할 차트관련 라이브러리를 검색해보던중 react-native-svg-charts 라이브러리를 발견하였다. 

react-native-svg-charts 는 react-native-svg 라이브러리를 사용한다.

react-native-svg 먼저 설치해야된다. 

react-native-svg 설치링크

react-native-svg-charts 테스트하느라 삽질을 워낙많이해서 설치과정을 스샷으로 찍어서 하나하나 설명할까 한다.ㅠㅠ

1) react-native init --version="0.56.0" ProjectName 명령어를 통해 프로젝트를 생성한다. 

2) npm i react-native-svg-charts   설치한다.

3) react-native-svg-charts 라이브러리는 react-native-svg를 사용하므로 해당 라이브러리를 설치하고 링킹한다. 

npm i react-native-svg@6.2.1   6.2.1버전을 설치하고 아래명령어로 linking 한다.

react-native link react-native-svg  

npm  i d3-shape  종속성 설치한다. 

import React from 'react'
import { LineChart, YAxis, Grid } from 'react-native-svg-charts'
import { View } from 'react-native'
 
class YAxisExample extends React.PureComponent {
 
    render() {
 
        const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]
 
        const contentInset = { top: 20, bottom: 20 }
 
        return (
            <View style={{ height: 200, flexDirection: 'row' }}>
                <YAxis
                    data={ data }
                    contentInset={ contentInset }
                    svg={{
                        fill: 'grey',
                        fontSize: 10,
                    }}
                    numberOfTicks={ 10 }
                    formatLabel={ value => `${value}ºC` }
                />
                <LineChart
                    style={{ flex: 1, marginLeft: 16 }}
                    data={ data }
                    svg={{ stroke: 'rgb(134, 65, 244)' }}
                    contentInset={ contentInset }
                >
                    <Grid/>
                </LineChart>
            </View>
        )
    }
 
}
export default YAxisExample;

[YAxisExample.js]

import YAxisExample from "./YAxisExample";
export default YAxis;

[[App.js]dfdfdfd

참고 : https://github.com/JesperLekland/react-native-svg-charts

https://www.npmjs.com/package/react-native-svg-charts