문서 › 더 보기

To●●t UI Chart에서 옮기기

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

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

바꾸기 전

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

바꾼 뒤

<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'` (콤보)
`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-*`
`chart.setData(data)`	`chart.update(data)`
`chart.on('clickSeries', fn)`	`chart.on('click', fn)`

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