[javascript] Highcharts에서 Y축 라벨 설정하기

27 Nov 2023

javascript

Highcharts는 JavaScript로 작성된 강력한 차트 라이브러리입니다. 이를 사용하여 데이터를 시각화하고 인터랙티브한 그래프를 생성할 수 있습니다. Y축은 그래프에서 수직으로 표시되며 표시된 값을 나타냅니다. 이 글에서는 Highcharts에서 Y축 라벨을 설정하는 방법에 대해 알아보겠습니다.

Y축 라벨 설정하기

Highcharts에서 Y축 라벨을 설정하려면 yAxis.labels 속성을 사용합니다. 이 속성을 통해 다양한 라벨 관련 설정을 할 수 있습니다. 예를 들어, 라벨의 스타일, 간격, 텍스트 포맷 등을 설정할 수 있습니다.

아래는 간단한 차트의 Y축 라벨을 설정하는 예제 코드입니다.

Highcharts.chart('container', {
    // 차트 옵션 설정
    yAxis: {
        labels: {
            style: {
                fontSize: '12px',
                color: '#333333'
            },
            formatter: function() {
                // 라벨 포맷 설정
                return this.value + ' 단위';
            }
        }
    },
    // 데이터 등 추가 설정
    series: [{
        data: [10, 15, 12, 8, 19]
    }]
});

위 예제 코드에서 yAxis.labels.style 속성은 Y축 라벨의 스타일을 설정합니다. fontSize와 color 속성을 사용하여 폰트 크기와 색상을 지정할 수 있습니다.

yAxis.labels.formatter 속성은 라벨의 텍스트 포맷을 설정하는 함수를 정의합니다. 위 예제에서는 this.value를 사용하여 현재 값을 가져와서 ‘ 단위’와 함께 반환합니다.

Y축 라벨 설정하기

참고 자료