# 툴팁과 범례

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

Source: https://82chart.com/docs/tooltip-legend/

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

```js
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));
```

## tooltip

| 값 | 설명 |
| --- | --- |
| `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?)` 입니다.