Highcharts는 JavaScript 기반의 차트 라이브러리로, 다양한 종류의 차트를 생성할 수 있습니다. 하지만 때로는 축 라벨이 길어서 차트가 가독성을 떨어뜨리는 경우가 있습니다. 이럴 때는 축 라벨을 회전시켜 공간을 절약할 수 있습니다.

1. X 축의 라벨 회전하기

X 축의 라벨을 회전시키려면 xAxis.labels.rotation 속성을 사용하면 됩니다. 이 속성에는 각도 값을 입력하여 라벨이 회전하는 정도를 설정합니다. 예를 들어, 라벨을 45도로 회전하려면 다음과 같이 코드를 작성합니다:

Highcharts.chart('container', {
    // 차트 옵션 설정
    // ...
    xAxis: {
        labels: {
            rotation: 45
        }
    },
    // ...
});

2. Y 축의 라벨 회전하기

Y 축의 라벨을 회전시키려면 yAxis.labels.rotation 속성을 사용하면 됩니다. X 축의 라벨과 동일한 방식으로 사용할 수 있습니다. 예를 들어, Y 축의 라벨을 90도로 회전하려면 다음과 같이 코드를 작성합니다:

Highcharts.chart('container', {
    // 차트 옵션 설정
    // ...
    yAxis: {
        labels: {
            rotation: 90
        }
    },
    // ...
});

3. 라벨 회전 범위 제한하기

때로는 라벨을 일정 각도 이상으로 회전시키지 않기를 원할 수 있습니다. 이 경우, 회전 범위를 제한해야 합니다. Highcharts에서는 xAxis/labels/rotation 또는 yAxis/labels/rotation 속성에 최소 및 최대 각도 값을 설정하여 라벨 회전 범위를 제한할 수 있습니다. 예를 들어, 라벨을 -45도부터 45도까지 회전하도록 설정하려면 다음과 같이 코드를 작성합니다:

Highcharts.chart('container', {
    // 차트 옵션 설정
    // ...
    xAxis: {
        labels: {
            rotation: {
                min: -45,
                max: 45
            }
        }
    },
    // ...
});

이와 같은 방식으로 Y 축의 라벨에도 회전 범위를 제한할 수 있습니다.

마치며

Highcharts에서 축 라벨을 회전시키면 차트의 가독성을 향상시킬 수 있습니다. xAxis.labels.rotation과 yAxis.labels.rotation 속성을 사용하여 적절한 각도로 라벨을 회전시키고, 필요에 따라 회전 범위를 제한하십시오.

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