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

이번에는 Highcharts에서 X축 라벨을 설정하는 방법에 대해서 알아보겠습니다.

Highcharts에서 X축 라벨을 설정하기 위해서는 xAxis 객체를 사용합니다. xAxis 객체를 생성하고 categories 속성을 사용하여 X축 라벨의 배열을 정의할 수 있습니다. 이 배열은 X축에 표시될 각 라벨의 순서대로 값을 가지게 됩니다.

아래는 예시 코드입니다.

Highcharts.chart('container', {
    xAxis: {
        categories: ['라벨1', '라벨2', '라벨3', '라벨4', '라벨5']
    },
    series: [{
        data: [5, 10, 15, 20, 25]
    }]
});

위의 코드에서는 categories 속성에 5개의 라벨을 정의하고 있습니다. 이렇게 설정된 라벨은 X축에 순서대로 표시됩니다.

또한, Highcharts에서는 라벨에 대한 스타일링도 적용할 수 있습니다. xAxis 객체 안에 있는 labels 속성을 사용하여 다양한 스타일을 설정할 수 있습니다. 예를 들면, 폰트 크기, 폰트 스타일, 색상 등을 변경할 수 있습니다.

xAxis: {
    labels: {
        style: {
            fontSize: '12px',
            fontWeight: 'bold',
            color: '#333333'
        }
    }
}

위의 코드는 라벨의 폰트 크기를 12px로, 폰트 스타일을 bold로, 색상을 #333333으로 설정하는 예시입니다.

Highcharts에서 X축 라벨을 설정하는 방법에 대해 알아보았습니다. 이를 활용하여 다양한 형태의 차트를 구성하고 사용자에게 보다 직관적인 정보를 전달할 수 있습니다.