Highcharts는 JavaScript를 기반으로한 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하여 데이터를 시각적으로 표현할 수 있습니다. 하지만 기본적으로는 데이터 포인트에 라벨이 표시되지 않습니다.

이번 포스트에서는 Highcharts에서 데이터 라벨을 추가하는 방법을 알아보겠습니다.

1. 데이터 라벨 옵션 추가하기

Highcharts에서 데이터 라벨을 추가하려면 dataLabels 객체를 사용하여 옵션을 설정해야 합니다. 이 옵션은 series 객체의 각 데이터 포인트에 적용됩니다.

예를 들어, 다음과 같이 dataLabels를 추가하여 각 데이터 포인트에 라벨을 표시할 수 있습니다:

series: [{
  name: '데이터 시리즈',
  data: [1, 2, 3, 4, 5],
  dataLabels: {
    enabled: true,
    format: '{y}', // 포인트 값 표시
    style: {
      color: '#000000' // 라벨 텍스트 색상
    }
  }
}]

위의 예제에서 dataLabels 객체의 enabled 속성을 true로 설정하여 데이터 라벨을 활성화하고, format 속성을 통해 표시할 라벨의 형식을 지정할 수 있습니다. style 속성을 사용하여 라벨의 색상을 변경할 수도 있습니다.

2. 라벨 위치 설정하기

데이터 라벨의 위치는 align 및 verticalAlign 속성을 사용하여 설정할 수 있습니다. align은 라벨을 가로로 정렬하는 데 사용되고, verticalAlign은 라벨을 세로로 정렬하는 데 사용됩니다.

예를 들어, 다음과 같이 align 및 verticalAlign을 설정하여 라벨을 오른쪽 상단에 위치시킬 수 있습니다:

dataLabels: {
  enabled: true,
  align: 'right',
  verticalAlign: 'top',
  format: '{y}',
  style: {
    color: '#000000'
  }
}

3. 차트 전체에 데이터 라벨 추가하기

만약 모든 데이터 포인트에 동일한 데이터 라벨을 추가하고 싶다면, plotOptions 객체를 사용하여 전체 차트에 대한 데이터 라벨 옵션을 설정할 수 있습니다.

예를 들어, 다음과 같이 plotOptions를 사용하여 모든 데이터 포인트에 동일한 데이터 라벨을 추가할 수 있습니다:

plotOptions: {
  series: {
    dataLabels: {
      enabled: true,
      format: '{y}',
      style: {
        color: '#000000'
      },
      align: 'right',
      verticalAlign: 'top'
    }
  }
}

위의 예제에서 plotOptions 객체의 series 속성을 사용하여 모든 시리즈에 대한 데이터 라벨 옵션을 설정합니다.

참고 자료

• Highcharts 공식 문서 - Data labels