Highcharts는 JavaScript 기반의 강력한 차트 라이브러리로, 다양한 종류의 차트를 생성하고 사용자 정의할 수 있습니다. 이번에는 Highcharts를 사용하여 차트 출력의 포맷을 설정하는 방법을 알아보도록 하겠습니다.

1. 숫자 포맷 설정하기

차트의 축 레이블이나 데이터 포인트의 값을 포맷팅하는 방법은 다양합니다. Highcharts는 이를 위해 format 속성을 제공합니다.

예를 들어, yAxis의 레이블을 3자리마다 쉼표로 구분된 숫자로 표시하고 싶다면 다음과 같이 format 속성을 설정할 수 있습니다.

yAxis: {
   labels: {
      format: '{value:,.0f}'
   }
}

이렇게 설정하면 1000 또는 1000000과 같은 숫자들은 “1,000” 또는 “1,000,000”과 같은 형식으로 표시됩니다.

2. 날짜 포맷 설정하기

Highcharts에서는 날짜와 시간을 포맷하는 데에도 format 속성을 사용할 수 있습니다. 이를 이용하여 xAxis의 레이블이나 데이터 포인트의 날짜 값을 원하는 형식으로 표시할 수 있습니다.

예를 들어, xAxis의 레이블을 “2021년 1월 1일”과 같이 월과 일을 포함한 형식으로 표시하고 싶다면 다음과 같이 format 속성을 설정할 수 있습니다.

xAxis: {
   labels: {
      format: '{value:%Y년 %m월 %d일}'
   }
}

위와 같이 설정하면 xAxis의 날짜 값은 “2021년 1월 1일”, “2021년 1월 2일”과 같은 형식으로 표시됩니다.

3. 툴팁 포맷 설정하기

차트의 데이터 포인트에 마우스를 올렸을 때 나타나는 툴팁의 포맷을 설정하기 위해서는 tooltip 속성을 사용합니다. tooltip 속성 안에 있는 pointFormat 속성으로 원하는 포맷을 설정할 수 있습니다.

예를 들어, 데이터 포인트의 x값과 y값을 소수점 2자리까지 보여주고 싶다면 다음과 같이 pointFormat 속성을 설정할 수 있습니다.

tooltip: {
   pointFormat: 'x: {point.x:.2f}, y: {point.y:.2f}'
}

위와 같이 설정하면 툴팁은 “x: 10.00, y: 20.00”과 같은 형식으로 표시됩니다.

결론

Highcharts를 사용하여 차트 출력 포맷을 설정하는 방법을 알아보았습니다. 숫자, 날짜, 툴팁 등 다양한 요소에 대해 원하는 포맷을 설정할 수 있으며, 이를 통해 사용자 정의된 차트를 만들 수 있습니다.

더 자세한 내용은 Highcharts 공식 문서를 참고하시기 바랍니다.