Highcharts는 JavaScript로 작성된 강력한 차트 라이브러리입니다. 데이터 시각화를 위해 많이 사용되며, 다양한 옵션을 제공하여 맞춤 설정할 수 있습니다. 이번 글에서는 Highcharts에서 Y축 값 포매팅하는 방법에 대해 알아보겠습니다.

yAxis.labels.formatter 옵션 사용하기

Highcharts에서 Y축 값 포맷을 변경하기 위해 yAxis.labels.formatter 옵션을 사용할 수 있습니다. 이 옵션은 Y축의 라벨을 서식화하는 함수를 정의합니다.

yAxis: {
  labels: {
    formatter: function() {
      // 포맷팅 로직을 작성합니다.
    }
  }
}

위의 코드에서 formatter 함수 내부에는 원하는 포맷팅 로직을 작성하면 됩니다.

예시: 천 단위 구분자 사용하기

한 예시로, Y축 값에 천 단위 구분자(콤마)를 추가하는 포맷팅을 적용해보겠습니다.

yAxis: {
  labels: {
    formatter: function() {
      return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
  }
}

위의 코드에서는 Y축 값인 this.value를 toString() 메소드를 사용하여 문자열로 변환한 뒤, replace() 메소드를 사용하여 정규 표현식을 이용해 천 단위 구분자를 삽입하는 로직을 작성했습니다.

결과 확인하기

위의 코드를 적용한 뒤에는 Highcharts 차트에서 Y축 값이 포매팅된 결과를 확인할 수 있습니다. 예를 들어, Y축 값이 1000인 경우 1,000으로 표시되는 것을 확인할 수 있을 것입니다.

결론

Highcharts에서는 Y축 값 포매팅을 위해 yAxis.labels.formatter 옵션을 사용할 수 있습니다. 이를 활용하여 다양한 포맷팅 로직을 적용할 수 있으며, 예시로는 천 단위 구분자를 추가하는 방법을 소개했습니다. 필요에 따라 다른 포맷팅 방식을 적용해보세요!

참고 자료

• Highcharts API 참조 문서