# 선 차트

> 시간에 따른 변화. 곡선, 계단, 점, 마지막 값 강조.

Source: https://82chart.com/docs/line/

`type: 'line'` 은 기본 차트입니다. 마우스를 올리면 세로 크로스헤어가 생기고 그 x의 모든 시리즈 값이 툴팁 하나에 나옵니다. 시리즈가 하나면 마지막 점에 값이 붙습니다(`lastPoint`).

```js
createChart('#chart', {
  type: 'line',
  title: '월별 방문자',
  unit: '명',
  smooth: true,
  data: {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월'],
    series: [
      { name: '올해', data: [41200, 43800, 52100, 49800, 61200, 66400, 71800, 69500, 74300, 80100] },
      { name: '작년', data: [36500, 35200, 40100, 42800, 47900, 51300, 55100, 53800, 58200, 60400], dashed: true },
    ],
  },
});
```

## 옵션

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `curve` | 'straight' | `'straight' \| 'smooth' \| 'step'`. smooth 는 값보다 튀어 오르지 않는 곡선(monotone) |
| `smooth` | false | `curve: 'smooth'` 와 같음. 시리즈에 주면 그 시리즈만 |
| `points` | 'auto' | 점 표시. auto 는 점이 30개 이하일 때만 |
| `pointShape` | 'circle' | `'circle' \| 'square' \| 'diamond'` |
| `lastPoint` | 선 하나면 true | 마지막 점을 강조 |
| `nulls` | 'gap' | 빈 값: `'gap' \| 'connect' \| 'zero'` |
| `dataLabels` | false | `true` 또는 `'end'`: 선 끝에만 값 (모든 점에 숫자를 붙이지 않음) |

## 계단 선

요금제·재고처럼 값이 바뀌기 전까지 그대로인 데이터는 `curve: 'step'` 이 정확합니다.

```js
createChart('#chart', {
  type: 'line',
  title: '보유 재고',
  unit: '개',
  curve: 'step',
  points: true,
  data: {
    labels: ['월', '화', '수', '목', '금', '토', '일'],
    series: [{ name: '재고', data: [120, 120, 85, 85, 140, 132, 132] }],
  },
});
```