문서 › 시작

데이터 형식

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

모든 차트는 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'` — 시리즈마다 다르게 주면 콤보
`color`	이 시리즈 색 (팔레트 대신)
`stack`	같은 이름끼리 쌓기 (`stacked: true` 면 막대·영역이 모두 한 묶음)
`smooth` / `dashed`	이 시리즈만 곡선 / 점선
`hidden`	처음에 숨김 (범례를 누르면 보임)
`axis`	`'right'` 면 오른쪽 y축에 (콤보, 직접 켜는 옵션)

빈 값

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

움직이는 예제

이 예제의 코드

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가 아니라 그 지역의 자정으로 읽습니다.

움직이는 예제

이 예제의 코드

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='...'> 에는 속성 문자열로 넣으면 됩니다.