# Moving from To●●t UI Chart

> Replace To●●t UI Chart, archived (no longer maintained) in September 2026.

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

NHN archived the To●●t UI Chart repository in September 2026; it no longer receives fixes. 82chart aims at the same place (Korean screens, free, no dependencies) and the data looks alike, so most of the work is renaming.

## Before

```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>
```

## After

```html
<link rel="stylesheet" href="https://82chart.com/cdn/v0.3.0/82chart.css">
<script src="https://82chart.com/cdn/v0.3.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>
```

## Name map

| To●●t UI Chart | 82chart |
| --- | --- |
| `data.categories` | `data.labels` |
| `data.series[].name / data` | Unchanged: `data.series[].name / data` |
| `columnChart` | `type: 'bar'` |
| `barChart` (horizontal) | `type: 'bar', horizontal: true` |
| `lineChart` / `areaChart` | `type: 'line'` / `'area'` |
| `pieChart` (+ `series.radiusRange` for donuts) | `type: 'pie'` / `'donut'` |
| `scatterChart` / `bubbleChart` | `type: 'scatter'` (+ `r` on points) |
| `radarChart`, `gaugeChart` | `type: 'radar'`, `'gauge'` |
| `columnLineChart` | `type: 'bar'` with `type: 'line'` on the line series ([combo](https://82chart.com/en/docs/combo/)) |
| `options.series.stack` | `stacked: true` or `'percent'` |
| `options.series.zoomable` | `zoom: true` |
| `options.exportMenu` | `exporting` (on by default) |
| `options.chart.title` / `width` / `height` | `title` / parent width / `height` |
| `options.theme` | [CSS variables `--c82-*`](https://82chart.com/en/docs/theme-colors/) |
| `chart.setData(data)` | `chart.update(data)` |
| `chart.on('clickSeries', fn)` | `chart.on('click', fn)` |

- Heatmaps, calendar heatmaps, treemaps, funnels and waterfalls are there since 0.3.0 (`heatmap`, `treemap` and so on). Box plots, bullet charts, radial bars and nested pies are not there yet.
- 82chart follows its parent's width, so no `width` is needed.
- On Korean pages the axis uses 만·억 units; for report-style commas use `numberFormat: 'comma'`.