Installation and integration.
Install from npm, import CSS, register charts, and connect a Pro license.
Prerequisites
#Use Node.js, npm, and an app build tool that resolves package imports and CSS imports. Install in the folder containing your project’s package.json. Add JavaScript examples to your app entry file and run your development server.
Install with npm
#Community
npm install @syidax/advanced@latestPro
npm install @syidax/advanced-pro@latestChoose one edition. Both editions install from public npm; Pro features require a valid product license. When switching to Pro, use the same Pro package for CSS, components, and license imports.
Using Core Pro with Chart/Grid
npm install @syidax/core@npm:@syidax/core-pro@latest @syidax/advanced-pro@latestThis combination installs Core Pro under the @syidax/core alias, so use @syidax/core/… for its CSS, component, and license imports. Use @syidax/advanced-pro/… for Chart/Grid. For Chart/Grid Community, replace @syidax/advanced-pro@latest in the command with @syidax/advanced@latest. Chart and Grid share one package.
Register charts and connect data
#Import CSS and register the components in your app's entry file. The following example uses the Community Line chart.
import '@syidax/advanced/css/chart';
import { defineCustomElement } from '@syidax/advanced/components/sy-line-chart.js';
defineCustomElement();
const chart = document.createElement('sy-line-chart');
chart.series = [{ name: 'Orders', values: [12, 24, 18] }];
document.body.append(chart);Each chart's source code includes component registration, the complete sample dataset, and responsive sizing. Use import paths matching the installed package. For Pro, register the license below before connecting the chart.
Chart selection and source code · Attributes and JavaScript properties
Register a Pro license
#Register your issued certificate over HTTPS or localhost. Keep only the signed certificate in the license file; never put the signing private key in the app. The example below registers a Pro Candlestick chart.
import '@syidax/advanced-pro/css/chart';
import { registerLicense } from '@syidax/advanced-pro/license';
import { defineCustomElement } from '@syidax/advanced-pro/components/sy-candlestick-chart.js';
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('License registration failed.');
// Connect the chart after registering the license.
defineCustomElement();You need valid entitlements for the Pro chart, renderer, and branding features you use. Review the package's LICENSE and NOTICE. When connecting helper controls such as Visual Map, also check the target chart's tier.