SYIDAX CHARTS

Installation and your first chart

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

Install the package

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

npm install @syidax/advanced@latest

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
Install Community or Pro from public npm

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>

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

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.