MPAndroidChart의 MarkerView 잘림 현상 해결 방법

Trindex 앱 0.35.2 버전 업데이트 개발 당시 MPAndroidChart의 MarkerView 잘림 현상을 해결하는 과정을 정리한 글이다.

MPAndroidChart 사용 차트에서 MarkerView 잘림 현상 발견

MPAndroidChart에서 MarkerView가 잘리는 현상

Trindex 앱을 사용하다가 위 스샷과 같이 MarkerView가 잘려나가는 현상을 발견했다. 특정 상황에서만 발생하는 문제로 MarkerView가 잘림으로써 지표의 발표 일자를 정확히 확인할 수 없게 된 것이다. 증상을 좀 더 상세하게 확인해 보니 우측 Y축 데이터가 없을 때 우측 Y축 레이블 자리에 공간이 작게 할당되면서 나타나는 현상이었다.

문제없이 잘 되는 경우도 있다

좌측 Y축 데이터의 레이블 폭이 클 때에는 우측 Y축에 데이터가 없더라도 공간이 좀 더 할당되어 잘림 현상이 나타나지 않는 경우도 있었다.

MPAndroidChart의 MarkerView 잘림 현상 해결 과정

GitHub에 명시된 MPAndroidChart 설정 방법

Trindex 앱의 차트는 MPAndroidChart 오픈 소스 라이브러리를 사용해서 만들었다. 좌측 Y축과 차트의 시작, 또는 우측 Y축과 차트의 끝 사이 공간 크기를 설정하는 메소드가 이미 제공하는 것을 아닐까 해서 구글링을 시도했지만 결국 찾지 못했다. (혹시 알고 계신 분이 이 글을 보게 된다면 댓글 좀 부탁드립니다.) 역시 100% 만족스러운 오픈 소스를 만나기는 어렵다.

MPAndroidChart 최신 버전 정보

해당 라이브러리의 마지막 업데이트 날짜를 보니 브랜치를 치고 싶은 욕구가 올라왔다. 하지만 그 정도 시간까지는 없으니 가능하다면 주어진 것 내에서 해결해 보려고 한 것인데...

xAxis.setSpaceMin(0.1f);
xAxis.setSpaceMax(300.0f);

구글링을 하다가 비스름한 것을 찾았다. setSpaceMin() 메소드의 경우 첫 데이터 좌측으로 X축 범위를 더 확장시키고, setSpaceMax() 메소드의 경우 마지막 데이터 우측으로 X축 범위를 더 확장시켜 준다. 당면한 문제를 해결은 할 수는 있었으나

setSpaceMin(), setSpaceMax()를 적용했을 경우

차트를 확대할수록 확장된 X축 공간이 너무 넓어져서 UX를 망친다는 문제가 있었다. 반쪽짜리 해결책. 다행히도 구글링에 시간을 좀 더 투자한 끝에 적당한 해결책을 찾을 수 있었다.

MPAndroidChart MarkerView 잘림 현상 최종 해결책

yAxisRigth.setMinWidth(getResources().getDisplayMetrics().densityDpi * 0.05f);

setMinWidth() 메소드는 Y축 레이블의 최소폭을 설정해 주는 메소드이다. 위 코드 한 줄로 우측 Y축에 데이터가 없거나 좌측 Y축 레이블의 크기가 작더라도 우측 Y축 레이블에 최소한의 공간을 마련할 수 있다. 적용 결과는...

setMinWidth()를 사용하여 MarkerView 잘림 현상을 해결한 모습

성공적.

차트를 확대해도 빈 공간이 확대되지 않는다

확대해서 봐도 큰 문제가 없다. 문제 해결 완료.