# 데이터 형식

> labels 와 series, 짝 배열, 점 객체, 빈 값, 날짜 축.

Source: https://82chart.com/docs/data-format/

모든 차트는 `data: { labels?, series }` 하나를 받습니다. 시리즈의 `data` 는 세 가지 모양 중 하나입니다.

| 모양 | 예 | 쓰는 곳 |
| --- | --- | --- |
| 숫자 배열 | `[120, 98, null, 143]` | `labels[i]` 가 x. 대부분의 선·막대·영역 |
| [x, y] 짝 | `[['2026-10-01', 120], ['2026-10-02', 98]]` | 날짜 축, 시리즈마다 x가 다를 때 |
| 점 객체 | `[{ x: 3, y: 12, r: 8 }]` | 산점도, 거품(`r`) |

## 시리즈 하나의 옵션

| 속성 | 설명 |
| --- | --- |
| `name` | 범례·툴팁·표에 쓰는 이름 |
| `data` | 위 세 가지 중 하나 |
| `type` | `'line' \| 'area' \| 'bar' \| 'scatter'` — 시리즈마다 다르게 주면 [콤보](https://82chart.com/docs/combo/) |
| `color` | 이 시리즈 색 (팔레트 대신) |
| `stack` | 같은 이름끼리 쌓기 (`stacked: true` 면 막대·영역이 모두 한 묶음) |
| `smooth` / `dashed` | 이 시리즈만 곡선 / 점선 |
| `hidden` | 처음에 숨김 (범례를 누르면 보임) |
| `axis` | `'right'` 면 오른쪽 y축에 ([콤보](https://82chart.com/docs/combo/), 직접 켜는 옵션) |

## 빈 값

`null` 은 "값 없음"입니다. 0으로 그리지 않고 선을 끊습니다. `nulls` 옵션으로 바꿀 수 있습니다: `'gap'`(기본, 끊김) · `'connect'`(점선으로 잇기) · `'zero'`(0으로).

```js
createChart('#chart', {
  type: 'line',
  title: '일별 방문자',
  unit: '명',
  nulls: 'connect',
  data: {
    labels: ['10.14', '10.15', '10.16', '10.17', '10.18', '10.19', '10.20'],
    series: [{ name: '방문자', data: [1820, 2140, null, 2410, 2290, 1650, 1980] }],
  },
});
```

## 날짜 축

`labels` 나 x 값이 날짜(`Date`, `'2026-10'`, `'2026-10-21'`, `'2026-10-21T09:00'`)면 82chart가 알아보고 `10월` · `10.21` · `09:00` 처럼 간격에 맞게 적습니다. [x, y] 짝으로 주면 진짜 시간 축이 되어 빠진 날은 그만큼 띄워 그립니다. 날짜만 있는 문자열은 UTC가 아니라 그 지역의 자정으로 읽습니다.

```js
createChart('#chart', {
  type: 'area',
  title: '주문 수',
  unit: '건',
  data: {
    series: [{ name: '주문', data: [['2026-10-01', 412], ['2026-10-02', 455], ['2026-10-05', 520], ['2026-10-06', 498], ['2026-10-07', 610], ['2026-10-08', 588]] }],
  },
});
```

축의 종류를 직접 정하려면 `xAxis: { type: 'category' | 'linear' | 'time' }` 를 씁니다. 날짜 라벨을 칸마다 똑같이 놓고 싶으면 `'category'` 입니다.

## 웹 컴포넌트·서버에서 받을 때

데이터는 JSON 으로 그대로 옮길 수 있는 모양입니다. 서버가 `{"labels": [...], "series": [...]}` 를 내려주면 `chart.update(json)` 한 줄, `<chart-82 data='...'>` 에는 속성 문자열로 넣으면 됩니다.