API
TooltipOptions

TooltipOptions extends ChartItemOptions

데이터포인트 뷰에 마우스가 올라가면 표시되는 툴팁 상자 옵션.
툴팁 개요 페이지를 참조한다.

Options

borderRadius: number (opens in a new tab)

툴팁 모서리의 굴곡 설정.

default :5

followPointer: boolean (opens in a new tab)

true이면 툴팁 상자가 마우스 포인터를 따라 다닌다.


false, true를 명시적으로 지정하지 않으면 시리즈 종류에 따라 자동 설정된다. ex) pie 시리즈는 true, bar 시리즈는 false가 된다.

default :undefined

headerHeight: number (opens in a new tab)

툴팁 헤더의 높이.
0 이하의 값을 설정할 경우 표시되지 않는다.

default :7

hideDelay: number (opens in a new tab)

툴팁이 점진적으로 닫히는 시간을 밀리초 단위로 지정한다.

default :700

minHeight: number (opens in a new tab)

툴팁의 최소 높이.

default :40

minWidth: number (opens in a new tab)

툴팁의 최소 너비.

default :100

nanText: string (opens in a new tab)

툴팁 텍스트 속 숫자 값이 NaN일 때 대신 표시되는 텍스트.

default :''

numberFormat: string (opens in a new tab)

툴팁에 표시될 숫자값의 기본 형식.
text예 표시 문자열을 지정할 때 ${yValue;;#,###.0}와 같은 식으로 숫자 형식을 지정할 수 있다.

default :',#.##'

offset: number (opens in a new tab)

목표 지점과 tooltip 사이의 간격.

default :8

scope: 'axis' | 'group' | 'hover' | 'point'

하나의 툴팁으로 표시할 범위.

  • 'axis'
  • 'group'
  • 'hover'
  • 'point'

default :hover

simpleMode: boolean (opens in a new tab)

true 이면 headerHeight, tailSize, borderRadius에 각각 0을 지정한 것과 같다.

default :false

style: SVGStyles | string (opens in a new tab)

스타일셋 또는 css selector (opens in a new tab).

default :undefined

tailSize: number (opens in a new tab)

툴팁 꼬리 크기.
0 이하의 값을 설정할 경우 표시되지 않는다.

default :10

text: string (opens in a new tab)

툴팁에 표시할 텍스트 형식.
시리즈에 tooltipText가 시리즈 별 tooltip을 제공하지만, 이 속성이 지정된 경우 우선 사용된다.

${param;default;format} 형식으로 아래과 같은 변수로 데이터 포인트 및 시리즈 값을 지정할 수 있다.

변수설명
series시리즈 이름
name포인트 이름. 포인트가 속한 카테고리 이름이거나, 'x' 속성으로 지정한 값
x'x' 속성으로 지정한 값
y'y' 속성으로 지정한 값
xValue계산된 x값
yValue계산된 y값

default :undefined

timeFormat: string (opens in a new tab)

툴팁에 표시될 날짜(시간)값의 기본 형식.
text예 표시 문자열을 지정할 때 ${x;;yyyy.MM}와 같은 식으로 날짜(시간) 형식을 지정할 수 있다.

default :'yyyy-MM-dd'

visible: boolean (opens in a new tab)

표시 여부.

default :true