Docs › More

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

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

Apex●●●rts is no longer MIT from 5.0 (paid above $2M annual revenue) and adds a watermark 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

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();

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` or `numberFormat`
`chart.toolbar.export`	`exporting`
`chart.updateSeries()`	`chart.update(data)`

Chart.●s

// 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
`chart.data = …; chart.update()`	`chart.update(data)`