# To●●t UI Chart에서 옮기기

> 2026년 9월 보관(유지보수 종료)된 To●●t UI Chart를 82chart로 바꾸는 순서.

Source: https://82chart.com/docs/migrate-toast-ui-chart/

NHN의 To●●t UI Chart 저장소는 2026년 9월 보관 처리되어 더 이상 고쳐지지 않습니다. 82chart는 같은 자리(한국어 화면, 무료, 의존성 없음)를 목표로 하고, 데이터 모양도 비슷해서 대부분 이름만 바꾸면 됩니다.

## 바꾸기 전

```html
<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/to●●tui-chart.min.css">
<script src="https://uicdn.toast.com/chart/latest/to●●tui-chart.min.js"></script>
<div id="chart"></div>
<script>
  // columnChart = vertical bars (barChart is horizontal there)
  const chart = to●●tui.Chart.columnChart({
    el: document.getElementById('chart'),
    data: {
      categories: ['1월', '2월', '3월'],
      series: [{ name: '매출', data: [32000000, 41000000, 38500000] }],
    },
    options: { chart: { title: '월별 매출', width: 600, height: 400 }, yAxis: { title: '원' } },
  });
</script>
```

## 바꾼 뒤

```html
<link rel="stylesheet" href="https://82chart.com/cdn/v0.2.0/82chart.css">
<script src="https://82chart.com/cdn/v0.2.0/82chart.min.js"></script>
<div id="chart"></div>
<script>
  const chart = Chart82.createChart('#chart', {
    type: 'bar',
    title: '월별 매출',
    unit: '원',
    height: 400,
    data: {
      labels: ['1월', '2월', '3월'],
      series: [{ name: '매출', data: [32000000, 41000000, 38500000] }],
    },
  });
</script>
```

## 이름 대응표

| To●●t UI Chart | 82chart |
| --- | --- |
| `data.categories` | `data.labels` |
| `data.series[].name / data` | 그대로 `data.series[].name / data` |
| `columnChart` | `type: 'bar'` |
| `barChart` (가로) | `type: 'bar', horizontal: true` |
| `lineChart` / `areaChart` | `type: 'line'` / `'area'` |
| `pieChart` (+ `series.radiusRange` 로 도넛) | `type: 'pie'` / `'donut'` |
| `scatterChart` / `bubbleChart` | `type: 'scatter'` (+ 점의 `r`) |
| `radarChart`, `gaugeChart` | `type: 'radar'`, `'gauge'` |
| `columnLineChart` | `type: 'bar'` + 선 시리즈에 `type: 'line'` ([콤보](https://82chart.com/docs/combo/)) |
| `options.series.stack` | `stacked: true` 또는 `'percent'` |
| `options.series.zoomable` | `zoom: true` |
| `options.exportMenu` | `exporting` (기본 켜짐) |
| `options.chart.title` / `width` / `height` | `title` / 부모 폭 / `height` |
| `options.theme` | [CSS 변수 `--c82-*`](https://82chart.com/docs/theme-colors/) |
| `chart.setData(data)` | `chart.update(data)` |
| `chart.on('clickSeries', fn)` | `chart.on('click', fn)` |

- 히트맵, 트리맵, 박스플롯, 불릿, 방사형 막대, 겹친 파이는 아직 없습니다. 히트맵은 다음 버전에 넣을 예정입니다.
- 82chart는 폭을 부모에 맞춰 자동으로 바꾸므로 `width` 를 주지 않아도 됩니다.
- 한국어 페이지에서 축은 기본이 만·억 단위입니다. 보고서처럼 쉼표 숫자를 원하면 `numberFormat: 'comma'`.