# Getting started

> Draw your first chart in five minutes.

Source: https://82chart.com/en/docs/getting-started/

82chart is a dependency-free SVG chart component. A page without a build step needs two CDN lines; an npm project needs one package. No license key, no watermark, no sign-up, no payment.

```js
createChart('#chart', {
  type: 'bar',
  title: 'Monthly sales',
  prefix: '₩',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  },
});
```

Axis labels are short (**32M, 52M**) and the tooltip shows the exact number (**₩32,000,000**). On Korean pages (`<html lang="ko">`) the axis uses 만·억 units instead.

## From the CDN

The quickest path. The script defines the global `Chart82` and registers the `<chart-82>` tag.

```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>
  Chart82.createChart('#chart', {
    type: 'bar',
    title: 'Monthly sales',
    prefix: '₩',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
    },
  });
</script>
```

## From npm

```sh
npm i @82chart/core
```

```js
import { createChart } from '@82chart/core';
import '@82chart/core/styles.css';

const chart = createChart('#chart', {
  type: 'bar',
  title: 'Monthly sales',
  prefix: '₩',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  },
});

chart.on('click', (point) => console.log(point.x, point.y));
```

The first argument of `createChart` is an element or a selector; whatever it holds is replaced by the chart. The chart takes its parent's width and redraws when that changes.

## Changing the data

```js
chart.update({
  labels: ['Jul', 'Aug'],
  series: [{ name: 'Sales', data: [64000000, 70500000] }],
});
chart.setOptions({ type: 'line', smooth: true }); // change some options
chart.destroy();                                  // remove it
```

## Next

- [Data format](https://82chart.com/en/docs/data-format/): time axes, gaps, point lists
- [Numbers and dates](https://82chart.com/en/docs/numbers-dates/): K/M, 만·억, units, date patterns
- [Bar](https://82chart.com/en/docs/bar/) · [Line](https://82chart.com/en/docs/line/) · [Pie and donut](https://82chart.com/en/docs/pie-donut/) · [KPI cards](https://82chart.com/en/docs/sparkline-kpi/)
- [React](https://82chart.com/en/docs/react/) · [Vue](https://82chart.com/en/docs/vue/) · [Svelte](https://82chart.com/en/docs/svelte/) · [Angular](https://82chart.com/en/docs/angular/)