# Installation and your first chart

Connect the package, register the chart elements you need, and assign data.

Canonical: https://chart.syidax.com/docs/getting-started/

<a id="install"></a>

## Install the package

Install Community or Pro from public npm in your app project, according to the features you use.

```sh
npm install @syidax/advanced@latest
```

```sh
npm install @syidax/advanced-pro@latest
```

Apps using Pro features install @syidax/advanced-pro and use that package for CSS, component, and license imports.

- [Installation files and runnable HTML examples](https://chart.syidax.com/charts/installation) — Install Community or Pro from public npm

<a id="register"></a>

## Register elements and connect data

The code below shows an app entry point and HTML for a bundler-based project. Register the components you need directly. Assign arrays to element properties rather than string attributes.

```javascript
import '@syidax/advanced/css/chart';
import { defineCustomElement } from '@syidax/advanced/components/sy-line-chart.js';

defineCustomElement();
await customElements.whenDefined('sy-line-chart');
const chart = document.querySelector('#vis');
chart.series = [{ name: 'Revenue', values: [12, 18, 15, 24] }];
chart.xAxis = { kind: 'category', categories: ['Jan', 'Feb', 'Mar', 'Apr'] };
chart.legend = true;
```

```html
<div id="chart-container">
  <sy-line-chart id="vis" height="360" aria-label="Monthly revenue"></sy-line-chart>
</div>
```

<a id="resize"></a>

## Sizing and cleanup

Observe the container size and update width. When an SPA screen is removed, disconnect observers and remove listeners registered by your app.

```javascript
const container = document.querySelector('#chart-container');
const observer = new ResizeObserver(([entry]) => {
  chart.width = Math.max(160, Math.floor(entry.contentRect.width));
});
observer.observe(container);

function dispose() {
  observer.disconnect();
}
```

<a id="pro"></a>

## Pro license

Use Pro charts, renderers, and branding after registering a certificate with the required entitlements. Deliver only the issued, signed certificate to the app; never include a signing private key.

```javascript
import { registerLicense } from '@syidax/advanced-pro/license';

const response = await fetch('/licenses/syidax.json');
if (!response.ok) throw new Error('Unable to load the license.');
const result = await registerLicense(await response.json());
if (!result.ok) throw new Error('Unable to register the license.');
// Connect Pro charts after registration completes.
```