Highcharts는 JavaScript 기반의 인터랙티브한 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 만들 수 있으며, 축 범위를 설정하여 차트의 데이터 표현을 더욱 정확하게 조정할 수 있습니다.

X 축 범위 설정하기

X 축은 일반적으로 날짜, 시간 또는 카테고리 데이터를 표시하는데 사용됩니다. Highcharts에서는 xAxis 객체의 min 및 max 속성을 사용하여 X 축 범위를 설정할 수 있습니다. 아래는 예시 코드입니다.

Highcharts.chart('container', {
    xAxis: {
        min: new Date(2021, 0, 1),
        max: new Date(2021, 11, 31)
    },
    // 다른 차트 옵션들...
});

위 코드에서는 min 속성에는 시작 날짜를, max 속성에는 종료 날짜를 지정하였습니다. 일일히 날짜를 지정하는 대신, 별도의 날짜 객체를 생성하여 min 및 max 속성에 할당할 수도 있습니다.

Y 축 범위 설정하기

Y 축은 주로 수치 데이터를 표시하는데 사용됩니다. Y 축의 범위를 설정하면 데이터의 분포를 더 정확하게 표현할 수 있습니다. Highcharts에서는 yAxis 객체의 min 및 max 속성을 사용하여 Y 축 범위를 설정할 수 있습니다. 아래는 예시 코드입니다.

Highcharts.chart('container', {
    yAxis: {
        min: 0,
        max: 100
    },
    // 다른 차트 옵션들...
});

위 코드에서는 min 속성에는 최소값을, max 속성에는 최대값을 지정하였습니다. 여기서는 0부터 100까지의 범위를 설정하였지만, 원하는 범위로 수정할 수 있습니다.

축 범위 자동 설정

만약 축 범위를 직접 설정하지 않으면 Highcharts는 데이터를 기반으로 최적의 축 범위를 자동으로 설정합니다. 이 경우에는 min 및 max 속성을 지정하지 않으면 됩니다.

결론

Highcharts에서 축 범위를 설정하는 방법에 대해 알아보았습니다. 이를 통해 차트의 데이터 표현을 더욱 정확하게 조정할 수 있습니다. 따라서 필요에 따라 적절한 축 범위를 설정하여 차트의 가독성을 높일 수 있습니다.

참고 자료

• Highcharts 공식 문서