# Web component <chart-82>

> One HTML tag, no framework.

Source: https://82chart.com/en/docs/web-component/

The CDN scripts (`82chart.min.js`, `82chart.esm.js`) register `<chart-82>` on their own; with the npm package call `defineChartElement()` once. Server templates (PHP, JSP, Django) only need to print JSON.

```html
<chart-82
  type="bar"
  title="Monthly sales"
  height="280"
  data='{"labels":["Jan","Feb","Mar"],"series":[{"name":"Sales","data":[32000,41000,38500]}]}'
></chart-82>
```

```js
import { defineChartElement } from '@82chart/core';
import '@82chart/core/styles.css';
defineChartElement();            // <chart-82>
// defineChartElement('my-chart'); // under another tag name

const el = document.querySelector('chart-82');
el.options = { zoom: true, annotations: { y: [{ value: 40000, label: 'Target' }] } }; // options as an object
el.chart.download('png');        // the chart instance inside
```

| Attribute | What it takes |
| --- | --- |
| `type`, `theme`, `skin` | Strings |
| `data` | A JSON string (`{"labels": …, "series": …}`) |
| `options` | Other options as JSON; options that need functions go through the `el.options` property |
| `height` | A number or `auto` |
| `title`, `subtitle`, `eyebrow`, `footnote`, `unit` | Card header and unit |
| `value`, `delta` | Read as numbers when they look like numbers |

Changing an attribute redraws the chart; removing the element cleans the chart up.