[Highcharts] Tooltip

Tooltip

툴팁은 시리즈의 포인트에 마우스를 호버링 하면 나타난다. 기본값으로 툴팁은 포인트의 값과 시리즈의 이름을 나타낸다. 사용 가능한 옵션을 보기 위해선 API 문서를 참조하라. 

Appearance

아래 코드는 툴팁의 가장흔한 옵션 외형을 설정하는 코드이다:

tooltip: {
    backgroundColor: '#FCFFC5',
    borderColor: 'black',
    borderRadius: 10,
    borderWidth: 3
}

Tooltip formatting

HTML의 부분집합으로 렌더링되는 툴팁의 콘텐츠는 implementer에게 권한을 부여함으로써 다양한 방법으로 변경 가능하다. tooltip 환경설정 객체와 더불어, series.tooltip을 이용해 툴팁 안에서 시리즈가 어떻게 표현되어야 할지 옵션도 설정할 수 있다. 

• 툴팁의 헤더부분은 tooltip.headerFormat을 이용해 변경할 수 있다. 
• 각 시리즈의 리스팅은 tooltip.pointFomat이나 각각의 시리즈의 pointFormat에서 주어진다.
• 푸터 부분은 tooltip.footerFormat 옵션에서 설정할 수 있다. 
• 위의 모든 옵션은 프로그래밍적인 제어를 위해 tooltop.formatter 콜백으로 덮어쓸 수 있다.

기본 설정으로는 tooltip은 HTML의 부분집합만 허용하는데 이는 HTML이 SVG를 이용해서 파싱 하고 렌더링 하기 때문이다. useHTML 옵션을  ture로 설정 함으로써 렌더러는 full HTML로 변경되고 인스턴스 테이블 레이아웃 혹은 툴팁 안의 이미지를 허용하게 된다. 

tooltip: {
    formatter: function() {
        return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name;
    }
}

Crosshairs

Crosshair는 상응하는 축과 포인트의 선을 표시한다. Crosshairs는 highcharts에서 기본값으로 disabled이지만 highcharts stock에서는 기본값이 enabled이다. 

 

Crosshair는 x축, y축, 혹은 둘다 설정할 수 있다:

// Enable for x-axis
xAxis: {
    crosshair: true
}
// Enable for y-axis
yAxis: {
    crosshair: true
}