# Moving from Apex●●●rts or Chart.●s

> When Apex●●●rts changed its license or Chart.●s needs one plugin too many.

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

Apex●●●rts is no longer MIT from 5.0 (paid above $2M annual revenue) and adds a watermark to its premium modules without a key from 6.5. Chart.●s is free, but zoom, annotations and time axes need separate plugins and adapters. 82chart has all of them built in, under 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] }],
  },
});
```

```js
createChart('#chart', {
  type: 'line',
  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` or `numberFormat` |
| `chart.toolbar.export` | `exporting` |
| `chart.updateSeries()` | `chart.update(data)` |

## Chart.●s

```js
// before
new Chart(document.getElementById('c'), {
  type: 'bar',
  data: { labels: ['Jan', 'Feb', 'Mar'], datasets: [{ label: 'Sales', data: [12, 19, 14] }] },
});

// after (a div instead of a canvas)
createChart('#c', {
  type: 'bar',
  data: { labels: ['Jan', 'Feb', 'Mar'], series: [{ name: 'Sales', data: [12, 19, 14] }] },
});
```

| Chart.●s | 82chart |
| --- | --- |
| `<canvas>` | Any `<div>` (drawn as SVG) |
| `datasets[].label` | `series[].name` |
| `type: 'doughnut'` | `type: 'donut'` |
| `type: 'bubble'` | `type: 'scatter'` with `r` on points |
| `options.indexAxis: 'y'` | `horizontal: true` |
| `scales.x.stacked` / `scales.y.stacked` | `stacked: true` |
| Zoom plugin | `zoom: true` |
| Annotation plugin | `annotations` |
| Date adapter (date-fns, moment …) | Not needed; see [time axes](https://82chart.com/en/docs/data-format/) |
| `chart.data = …; chart.update()` | `chart.update(data)` |

> Chart.●s draws on a canvas, so tens of thousands of points stay fast. 82chart draws up to a few thousand as SVG; a canvas renderer for more is planned.