[React Native] 리액트 네이티브 차트 라이브러리 추천

웹이나 앱을 개발하다 보면

데이터를 예쁘게 차트로 시각화하고 싶은 경우가 생깁니다.

 

리액트 네이티브에도 다양한

차트 라이브러리가 존재합니다.

✔ 하지만 기업이 아닌 개인 사용자들이 만든 커뮤니티 라이브러리가 대부분이기 때문에
사용하기 전에 다운로드 수, 최근 업데이트 날짜 등을 잘 확인해야 합니다.

 

제가 사용해 보고 좋다고 생각한 차트 라이브러리 2가지를 추천해 드리겠습니다. 😀

 

 

---

1. react-native-chart-kit

 

https://www.npmjs.com/package/react-native-chart-kit?activeTab=readme 

react-native-chart-kit

 

 

 

⦁ 소개

제가 제일 좋아하는 차트 라이브러리입니다.

심플하고 직관적인 UI가 특징입니다.

또 주간 다운로드 수도 높습니다.

예제 코드만 적용하더라도 큰 수고없이 예쁜 차트를 구현할 수 있습니다. 👍

 

⦁ 샘플

 

⦁ 소스코드

https://snack.expo.dev/

Snack - React Native in the browser

✔ Snack에 해당 코드를 복사 붙여넣기 해보세요😀

   공식문서에 들어가 보시면 라인차트 말고도 파이차트, 기여차트 등 다양한 차트가 있습니다.

 

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';

import {
  LineChart,
  BarChart,
  PieChart,
  ProgressChart,
  ContributionGraph,
  StackedBarChart
} from "react-native-chart-kit";

export default function App() {
  return (
    <View>
      <Text>Bezier Line Chart</Text>
      <LineChart
        data={{
          labels: ["January", "February", "March", "April", "May", "June"],
          datasets: [
            {
              data: [
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100
              ]
            }
          ]
        }}
        width={Dimensions.get("window").width} // from react-native
        height={220}
        yAxisLabel="$"
        yAxisSuffix="k"
        yAxisInterval={1} // optional, defaults to 1
        chartConfig={{
          backgroundColor: "#e26a00",
          backgroundGradientFrom: "#fb8c00",
          backgroundGradientTo: "#ffa726",
          decimalPlaces: 2, // optional, defaults to 2dp
          color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 16
          },
          propsForDots: {
            r: "6",
            strokeWidth: "2",
            stroke: "#ffa726"
          }
        }}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 16
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
});

 

 

---

 

⦁ Tip

 

 

✔ chartConfig 객체를 통해서 차트 스타일을 변경할 수 있습니다.

아래 코드를 통해서 배경색에 투명도를 줄 수 있습니다.

검은색 배경에 투명도를 주니까 다양한 테마 색에도 잘 어울렸습니다. 굿

backgroundGradientFromOpacity: 0.4,
backgroundGradientToOpacity: 0.4,

 

chartConfig={{
            backgroundColor: '#1cc910',
            //배경 색
            backgroundGradientFrom: '#0000',
            backgroundGradientTo: '#0000',
            backgroundGradientFromOpacity: 0.4,
            backgroundGradientToOpacity: 0.4,

            //막대 색
            fillShadowGradientOpacity: 1, //투명도
            fillShadowGradientTo : '#f780f4',

            //소수점
            decimalPlaces: 0,

            // 레이블, 전체적인 색
            color: (opacity = 1) => `rgba(255, 255, 255, 1)`,

            style: {
                borderRadius: 16,
            },
}}

 

---

 

---

2. react-native-gifted-charts

 

https://www.npmjs.com/package/react-native-gifted-charts?activeTab=readme 

react-native-gifted-charts

 

 

 

⦁ 소개

주간 다운로드 수는 약 2000으로 chart-kit의 10분의 1 정도지만, 디자인이 엄청 예쁩니다.
깃허브의 이슈를 보면 아직 svg, Expo Sdk 등 버전 관련 에러들이 많이 존재하는 것 같습니다.
다른 패키지들과 버전 충돌이 아쉽지만 그만큼 디자인이 엄청 좋기 때문에

에러만 발생하지 않는다면 추천드립니다. 👍

 

⦁ 사용방법

https://gifted-charts.web.app/gallery

Gifted Charts

 

 

✔ 이 라이브러리가 특별한 점이, 갤러리라는 웹사이트를 하나 구현해 놓았습니다.

정리를 엄청 잘 해놓아서 샘플 코드 이미지를 보면서 코드를 쉽게 적용할 수 있습니다.

 

---

 

---

3. 그 외 라이브러리들

 

https://openbase.com/js/react-native-gifted-charts/alternatives

react-native-gifted-charts: Alternatives | Openbase

 

 

 

⦁ 소개

해당 사이트에 들어 가보면 다양한 라이브러리를 찾을 수 있습니다.

ALTERNATIVES 탭을 확인하시면 관련된 다양한 라이브러리를 찾을 수 있습니다.

깃허브 별 수, 주간 다운로드 수, 마지막 커밋 날짜 등 신뢰할 수 있는 정보들을한눈에 확인할 수 있기 때문에 무척 편합니다.

 

다른 라이브러리를 찾고 계신다면 해당 사이트를 한번 뒤져보는 것을 추천드립니다.👍

 

---

 

---

참고 문헌 :