# Apex●●●rts·Chart.●s에서 옮기기

> 라이선스가 바뀐 Apex●●●rts, 플러그인이 필요한 Chart.●s 를 바꿀 때.

Source: https://82chart.com/docs/migrate-apexcharts-chartjs/

Apex●●●rts는 5.0부터 MIT가 아니며(연 매출 200만 달러 이상은 유료), 6.5부터는 키가 없으면 워터마크가 붙습니다. Chart.●s는 무료지만 확대·주석·날짜 축에 별도 플러그인과 어댑터가 필요합니다. 82chart는 이것들이 모두 기본으로 들어 있고 MIT입니다.

## Apex●●●rts

```js
const chart = new Apex●●●rts(document.querySelector('#chart'), {
  chart: { type: 'line', height: 350, zoom: { enabled: true } },
  series: [{ name: 'Visitors', data: [120, 180, 150, 220] }],
  xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu'] },
  yaxis: { labels: { formatter: (v) => v.toLocaleString() } },
});
chart.render();
```

```js
const chart = createChart('#chart', {
  type: 'line',
  height: 350,
  zoom: true,
  numberFormat: 'comma',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu'],
    series: [{ name: 'Visitors', data: [120, 180, 150, 220] }],
  },
});
```

| Apex●●●rts | 82chart |
| --- | --- |
| `chart.type` | `type` |
| `xaxis.categories` | `data.labels` |
| `series: [{ name, data }]` | `data.series: [{ name, data }]` |
| `chart.stacked`, `stackType: '100%'` | `stacked: true`, `'percent'` |
| `plotOptions.bar.horizontal` | `horizontal: true` |
| `chart.zoom.enabled` | `zoom: true` |
| `annotations.yaxis / xaxis` | `annotations.y / x / bands` |
| `yaxis.labels.formatter` | `yAxis.format` 또는 `numberFormat` |
| `chart.toolbar.export` | `exporting` |
| `chart.updateSeries()` | `chart.update(data)` |

## Chart.●s

```js
// 전
new Chart(document.getElementById('c'), {
  type: 'bar',
  data: { labels: ['1월', '2월', '3월'], datasets: [{ label: '매출', data: [12, 19, 14] }] },
});

// 후 (canvas 대신 div)
createChart('#c', {
  type: 'bar',
  data: { labels: ['1월', '2월', '3월'], series: [{ name: '매출', data: [12, 19, 14] }] },
});
```

| Chart.●s | 82chart |
| --- | --- |
| `<canvas>` | 아무 `<div>` (SVG로 그림) |
| `datasets[].label` | `series[].name` |
| `type: 'doughnut'` | `type: 'donut'` |
| `type: 'bubble'` | `type: 'scatter'` + 점의 `r` |
| `options.indexAxis: 'y'` | `horizontal: true` |
| `scales.x.stacked` / `scales.y.stacked` | `stacked: true` |
| 줌 플러그인 | `zoom: true` |
| 주석 플러그인 | `annotations` |
| 날짜 어댑터(date-fns·moment 등) | 필요 없음 — [날짜 축](https://82chart.com/docs/data-format/) |
| `chart.data = …; chart.update()` | `chart.update(data)` |

> Chart.●s는 canvas 라서 수만 개의 점도 빠릅니다. 82chart는 수천 개까지 SVG로 그리며, 그보다 많은 점을 위한 Canvas 렌더러는 이후 버전에 넣을 예정입니다.