문서 › 상호작용과 내보내기

툴팁과 범례

크로스헤어 툴팁, 값 모양 바꾸기, 범례로 시리즈 켜고 끄기.

선·영역은 세로 크로스헤어와 그 x의 모든 시리즈를 담은 툴팁 하나, 막대는 칸 강조와 칸의 모든 값, 파이·산점·게이지는 가리킨 조각 하나를 보여 줍니다. 쌓은 막대는 마지막 줄에 합계가 붙습니다. 툴팁은 오른쪽 끝에서 왼쪽으로 뒤집혀 잘리지 않습니다.

움직이는 예제

차트를 누르거나 키보드로 움직여 보세요.

이 예제의 코드

const chart = createChart('#chart', {
  type: 'line',
  title: '방문과 가입',
  unit: '명',
  tooltip: { format: (v, ctx) => ctx.seriesName === '가입' ? v + '명 (' + (v / 20).toFixed(1) + '%)' : v.toLocaleString('ko-KR') + '명' },
  legend: 'bottom',
  data: {
    labels: ['1일', '2일', '3일', '4일', '5일', '6일', '7일', '8일', '9일', '10일', '11일', '12일', '13일', '14일', '15일', '16일', '17일', '18일', '19일', '20일', '21일'],
    series: [
      { name: '방문자', data: [1820, 2140, 1990, 2410, 2290, 1650, 1580, 2010, 2380, 2550, 2470, 2620, 1910, 1840, 2230, 2680, 2810, 2740, 2950, 2100, 2060] },
      { name: '가입', data: [120, 156, 131, 188, 171, 98, 92, 140, 176, 205, 190, 214, 121, 117, 163, 221, 240, 228, 262, 141, 136] },
    ],
  },
});
chart.on('legendclick', (e) => log(e));

값	설명
`true`	기본
`false`	툴팁 없음 (`group` 이 있으면 크로스헤어는 남음)
`{ format(value, ctx) }`	값 칸의 글자를 직접 만듦. `ctx` 는 `{ seriesName, seriesIndex, index, x }`

툴팁 글자는 textContent 로 넣으므로 시리즈 이름에 HTML이 섞여 있어도 실행되지 않습니다. 코드로 툴팁을 띄우려면 chart.showTooltip(index, seriesIndex?), 숨기려면 chart.showTooltip(null).

legend

값	설명
기본	시리즈가 2개 이상이면 위, 1개면 없음(제목이 이름 역할). 파이·도넛은 오른쪽
`'top' \| 'bottom' \| 'right'`	위치
`true` / `false`	항상 보이기 / 숨기기

범례 항목은 버튼입니다. 누르면 그 시리즈를 숨기고 축을 다시 맞춥니다(마지막 하나는 숨겨지지 않음). 마우스를 올리면 나머지가 흐려집니다. 코드로는 chart.toggleSeries(index, visible?) 입니다.