[Highcharts] x축 날짜 표시 조정하기

안녕하세요 :)

프론트엔드 개발을 하다 보면 "안됩니다" 유혹에 빠지기 쉬운 것 같습니다.

 

디자이너님이 정말 예쁜 디자인을 구상해 오면 대부분의 경우 로직이 복잡해지기 마련입니다.

빠른 개발 일정으로 인해 심신이 지쳐있는 경우라면 "안됩니다"라고 말해버리고 싶은 충동이 가끔 들기도 하죠.

오늘 작업한 내용도 사실 고민을 많이 했습니다.

위의 차트를 보면 x축의 일자 표시가 매월 1일부터 시작하고있습니다.

따라서 가장 최근 달의 tick이 y축에 상당히 붙어 있음을 확인 할 수 있습니다. 이 포스팅을 쓰는 시점이 10월 4일이었거든요 ㅎㅎ

 

하지만 디자이너님이 바랬던 x축 디자인은 매월의 중간에 tick이 표시되는 것이었습니다. 예를들어 10월 1일이 아닌 10월 15일의 위치에 날짜가 표시되는 방식으로 말이죠.

 

highcharts는 정말 똑똑한 라이브러리입니다. 개발자가 일일이 설정을 하지 않아도 저렇게 매월 1일에 맞추어 x축을 렌더링 해줍니다. 문제는 이것을 15일로 바꾸려고 하니 어떻게 설정을 해야 할지 몰랐습니다.

 

사실 겉으로 보기에 위의 디자인도 나쁘진 않은 것 같아 굳이 바꾸어야 하나... 하는 생각도 들었지만, 디자이너님도 전문성을 가지고 최적의 디자인을 고안해 내신것이라 생각합니다. 따라서 방법을 강구해 보았습니다.

 

공식 문서를 뒤적여 보니, xAxix 설정에 tickPositioner라는 옵션을 발견했습니다. 요것을 이용하면 x축 어디에 일자를 표시할지 수동으로 설정할 수가 있습니다.

 

따라서 아래와 같이 설정값을 조정해 주었습니다.

 

    xAxis: { 
    
  		...
        
      tickPositioner: function () {
        let positions = []
        let startDate = this.dataMin
        let endDate = this.dataMax

        while (startDate <= endDate) {
          positions.push(moment(startDate).date(15))
          startDate = moment(startDate).add(1, 'months').valueOf()
        }

        return positions;
      },
    },

설명을 덧붙이자면, this값에는 시작일과 마지막일이(저의 경우 timestamp형식) 들어와 있습니다.

따라서 시작하는 달의 15일을 positions 배열에 추가하고 다음달로 넘어가는 방식으로 x축을 추가하면 아래와 같은 결과가 나옵니다.

 

혹시나 시작하는 달의 15일이 시작일 데이터보다 빠르면 어떻하지?라는 생각이 들어 배열에 10월 1일과 10월 3일을 추가해 보았습니다.

highcharts는 역시 똑똑해서 데이터의 날짜값을 초과하거나 미만한 x축은 자연스럽게 표시가 안되도록 되어있네요.