Highcharts는 인터랙티브한 차트를 생성하기 위한 강력한 자바스크립트 라이브러리입니다. 하지만 때에 따라서는 차트의 인터랙션을 제어하고 싶을 수도 있습니다. 이 글에서는 Highcharts에서 차트 인터랙션을 끄는 방법에 대해 알아보겠습니다.

1. 툴팁 비활성화

차트의 툴팁은 사용자가 차트 요소 위로 마우스를 올렸을 때 정보를 표시하는 기능입니다. 차트 인터랙션을 줄이기 위해서는 툴팁을 비활성화 하는 것이 좋습니다. Highcharts에서 툴팁을 비활성화 하려면 다음과 같이 설정할 수 있습니다.

tooltip: {
  enabled: false
}

2. 데이터 포인트 클릭 이벤트 제거

차트의 데이터 포인트를 클릭하면 일반적으로 해당 데이터에 대한 정보를 표시하거나 다른 동작을 수행하는 이벤트가 발생합니다. 인터랙션을 제어하기 위해서는 데이터 포인트 클릭 이벤트를 제거하는 것이 필요합니다. 다음과 같은 코드로 데이터 포인트 클릭 이벤트를 제거할 수 있습니다.

plotOptions: {
  series: {
    point: {
      events: {
        click: null
      }
    }
  }
}

3. 축 스크롤 제거

Highcharts에서는 차트의 축 스크롤을 사용하여 데이터를 스크롤링할 수 있습니다. 인터랙션을 제어하기 위해서는 축 스크롤을 제거하는 것이 좋습니다. 다음과 같은 코드로 축 스크롤을 제거할 수 있습니다.

scrollbar: {
  enabled: false
}

4. 드래그 및 줌 기능 제거

Highcharts에는 차트를 드래그하고 줌인/줌아웃하는 기능이 내장되어 있습니다. 인터랙션을 제어하기 위해서는 드래그 및 줌 기능을 제거하는 것이 필요합니다. 다음과 같은 코드로 드래그 및 줌 기능을 제거할 수 있습니다.

chart: {
  panning: false,
  zoomType: "none"
}

위의 방법들을 활용하여 Highcharts에서 차트 인터랙션을 제어할 수 있습니다. 원하는 기능을 비활성화하거나 제거함으로써 사용자와의 인터랙션을 끌 수 있습니다.

참고 자료

• Highcharts 공식 문서