[차트] RN에서 Victory Native 설치하기

✔️ 필요성

React Native에서 막대그래프나 라인그래프 혹은 파이차트 같이 그래프/차트를 표현해야 할 때가 있다. React Native에서는 아직까지 엄청나게 우세한 차트 라이브러리는 없는 것 같았다.

 

이것 저것 찾아보던 중 Victory-Native라는 라이브러리가 전체적으로 간단하면서도 애니메이션을 잘 보여줘서 모바일 환경에서 적합한 라이브러리라고 생각되어 도전해보았다.

 

예시에서도 알 수 있듯이 코드가 간단하고 툴팁이나 x축 y축이 기본적으로 귀엽다

 

✔️ 설치

설치도 굉장히 쉽다

npm install --save victory-native
react-native install react-native-svg
npx pod-install

 

 

✔️ 기본 예시

Victory Native에서 알려주고 있는 예시를 함수형 컴포넌트 + styled-components를 활용하도록 약간 코드를 수정해보았다. Bar의 색상은 style props를 통해서 바꿔줄 수 있다. 

import React from 'react';
import styled from 'styled-components/native';
import {VictoryBar, VictoryChart, VictoryTheme} from 'victory-native';

const data = [
  {quarter: 1, earnings: 13000},
  {quarter: 2, earnings: 16500},
  {quarter: 3, earnings: 14250},
  {quarter: 4, earnings: 19000},
];

const Container = styled.View`
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f2;
`;

const Chart = () => {
  return (
    <Container>
      <VictoryChart width={300} height={200} theme={VictoryTheme.material}>
        <VictoryBar
          data={data}
          x="quarter"
          y="earnings"
          style={{data: {fill: '#c43a31'}}}
        />
      </VictoryChart>
    </Container>
  );
};

export default Chart;

 

썩 예쁘다는 생각은 아직 들지 않지만 이제 차차 customize 해 나가야지! 지금까지는 차트 라이브러리가 매우 마음에 든다. 일단 간단해! (특히 FusionCharts에 비해서)