[RN/ReactNative] react-native-chart-kit LineChart의 기준축(y축) 데이터가 중복일 때 해결 방법

react-native에서 chart UI를 구현할 때 주로

react-native-chart-kit 라이브러리를 사용하는데,

GitHub - indiespirit/react-native-chart-kit: 📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart

 

그 중 막대형 차트를 구현하려면  LineChart 기능을 주로 쓸 것이다.

여기서 data의 datasets 데이터가 0이거나 적은(보통 4이하) 데이터밖에 없다면

기준이 되는 y축이 0,0,0,0,0 이런식으로 중복이 되어 보여지거나

위에서 언급한 데이터가 2 하나밖에 없다면 0,1,1,2,2 이런식으로 보여질 것이다.

 

해당 문제가 발생하는 원인은 라이브러리에서 해당 y축에 들어가는 기준점의 값이 default로 정해져있기 때문이다.

LineChart의 'segments' props인데, default값은 4로 되어있어서 이를 수정해주면 쉽게 해결이 가능하다.

 

 

사실 라이브러리 공식문서에도 나와있는 내용이다

 

데이터가 4 미만이면 해당 데이터의 숫자만큼(예를 들어 데이터가 2 하나이면 0,1,2만 노출될 것이다)

4 이상이면 default값인 4로 segments를 주는 방법을 사용하면 문제 해결에 힌트가 될 것이니 참고!