@syidax/advanced-pro

Syidax Chart & Grid Pro

Give your data a bigger stage.

Visit Syidax · Chart demos & docs · Grid demos & docs · Plans & licensing

Bring charts and data grids into the same application with a shared Web Components approach. Start with the Community capabilities, then add richer visualization and data workflows with the Chart and Grid rights your application needs.

Explore first, then build. Open a live example, change its properties, and bring the component into your own screen.

Quick start · React · Angular · Vue · License · Explore Syidax

Quick start

npm install @syidax/advanced-pro

Pro includes the Community feature set. Install one edition of each product in an application; Community and Pro use the same element names.

In a Vite app (or another bundler that supports CSS imports), create src/syidax.ts. Import the styles and register only the elements used by this example:

import '@syidax/advanced-pro/css/chart';
import '@syidax/advanced-pro/css/grid';
import { defineCustomElement as defineLineChart } from '@syidax/advanced-pro/components/sy-line-chart.js';
import { defineCustomElement as defineGrid } from '@syidax/advanced-pro/components/sy-grid.js';

defineLineChart();
defineGrid();

For a plain HTML app, add the markup to index.html and the entry code to src/main.ts:

<main class="sy-theme">
  <sy-line-chart chart-title="Weekly revenue" height="280"></sy-line-chart>
  <sy-grid height="280"></sy-grid>
</main>
<script type="module" src="/src/main.ts"></script>

import './syidax';

const values = [18, 28, 24, 42];
const columnDefs = [
  { field: 'product', headerName: 'Product', sortable: true },
  { field: 'revenue', headerName: 'Revenue', sortable: true },
];
const rowData = [
  { product: 'Studio', revenue: 4200 },
  { product: 'Workspace', revenue: 6800 },
];

const chart = document.querySelector('sy-line-chart');
const grid = document.querySelector('sy-grid');
if (chart) chart.values = values;
if (grid) {
  grid.columnDefs = columnDefs;
  grid.rowData = rowData;
}

Assign arrays and objects as JavaScript properties; HTML attributes are strings. Give charts and grids a visible size in your layout.

Choose your framework

The examples below use the published Web Components directly. You do not need a separate Syidax framework wrapper. The React and Vue examples reuse src/syidax.ts above; Angular has its own global-style setup below.

React

For a React 19 + TypeScript app, use src/App.tsx. The JSX declaration gives custom tags their element types and lets you use refs and component properties without any.

// src/App.tsx — React 19 + TypeScript
import { useEffect, useRef } from 'react';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
import type { Components } from '@syidax/advanced-pro';
import './syidax';

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'sy-line-chart': DetailedHTMLProps<HTMLAttributes<HTMLSyLineChartElement>, HTMLSyLineChartElement> & Partial<Components.SyLineChart>;
      'sy-grid': DetailedHTMLProps<HTMLAttributes<HTMLSyGridElement>, HTMLSyGridElement> & Partial<Components.SyGrid>;
    }
  }
}

const values = [18, 28, 24, 42];
const columnDefs = [
  { field: 'product', headerName: 'Product', sortable: true },
  { field: 'revenue', headerName: 'Revenue', sortable: true },
];
const rowData = [
  { product: 'Studio', revenue: 4200 },
  { product: 'Workspace', revenue: 6800 },
];

export default function App() {
  const chart = useRef<HTMLSyLineChartElement>(null);
  const grid = useRef<HTMLSyGridElement>(null);

  useEffect(() => {
    if (chart.current) chart.current.values = values;
    if (grid.current) {
      grid.current.columnDefs = columnDefs;
      grid.current.rowData = rowData;
    }
  }, []);

  return (
    <main className="sy-theme">
      <sy-line-chart ref={chart} chartTitle="Weekly revenue" height={280} />
      <sy-grid ref={grid} height={280} />
    </main>
  );
}

Keep refs for imperative component methods and use an effect with the appropriate dependencies when your data changes. Refs also provide an explicit way to pass arrays and objects.

Angular

For an Angular 20.2+ standalone application, add the package styles to your project’s angular.json → build.options.styles array, before your application styles. Keep any styles your app already uses:

{
  "styles": [
    "node_modules/@syidax/advanced-pro/dist/assets/style/chart.css",
    "node_modules/@syidax/advanced-pro/dist/assets/style/grid.css",
    "src/styles.css"
  ]
}

Use CUSTOM_ELEMENTS_SCHEMA in each standalone component whose template contains Syidax elements. Bind arrays and objects with Angular property bindings, and events with (eventName).

// src/app/app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { defineCustomElement as defineLineChart } from '@syidax/advanced-pro/components/sy-line-chart.js';
import { defineCustomElement as defineGrid } from '@syidax/advanced-pro/components/sy-grid.js';

defineLineChart();
defineGrid();

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <main class="sy-theme">
      <sy-line-chart [values]="values" [height]="280" chart-title="Weekly revenue"></sy-line-chart>
      <sy-grid [columnDefs]="columnDefs" [rowData]="rowData" [height]="280"></sy-grid>
    </main>
  `,
})
export class AppComponent {
  values = [18, 28, 24, 42];
  columnDefs = [
    { field: 'product', headerName: 'Product', sortable: true },
    { field: 'revenue', headerName: 'Revenue', sortable: true },
  ];
  rowData = [
    { product: 'Studio', revenue: 4200 },
    { product: 'Workspace', revenue: 6800 },
  ];
}

In src/main.ts, bootstrap the component:

import { provideZonelessChangeDetection } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [provideZonelessChangeDetection()],
}).catch(console.error);

For an existing application, keep its providers and bootstrap configuration and apply the component/schema changes to the appropriate screen. Restart ng serve after changing global styles.

Vue

For Vue 3 + Vite, tell the template compiler that sy-* tags are custom elements. Merge this into vite.config.ts and restart the dev server:

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: { isCustomElement: tag => tag.startsWith('sy-') },
    },
  })],
});

Then use src/App.vue:

<script setup lang="ts">
import './syidax';

const values = [18, 28, 24, 42];
const columnDefs = [
  { field: 'product', headerName: 'Product', sortable: true },
  { field: 'revenue', headerName: 'Revenue', sortable: true },
];
const rowData = [
  { product: 'Studio', revenue: 4200 },
  { product: 'Workspace', revenue: 6800 },
];
</script>

<template>
  <main class="sy-theme">
    <sy-line-chart :values.prop="values" :height.prop="280" chart-title="Weekly revenue" />
    <sy-grid :columnDefs.prop="columnDefs" :rowData.prop="rowData" :height.prop="280" />
  </main>
</template>

The .prop modifier keeps data as JavaScript values instead of serialized attributes. Update the bound arrays when the underlying data changes.

Client rendering, themes, and events

• These examples target browser-rendered applications. With Next.js, Nuxt, or Angular SSR, load element registration on the client and avoid accessing window, document, or element refs during server rendering.
• Import a product’s CSS once and retain the sy-theme application container. Add your own layout and theme customization around it.
• Register each element once. Keep one version and edition of a product per page, including in micro-frontends.
• Custom event names are case-sensitive. Use the event names and detail payloads documented in the component API.
• Grid features that use external WASM or worker assets need those assets served by your application. Follow the Grid installation guide for the asset and hosting setup.

Activate Pro

Get the signed license certificate from your Syidax account. Register it once during application startup before using licensed features:

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

// Supply the signed certificate issued for your application.
export async function activateSyidax(certificate: string) {
  const result = await registerLicense(certificate);
  if (!result.ok) throw new Error('Syidax license: ' + result.code);
}

Alternatively, serve the issued license JSON file from your application and point to it in the HTML head. In this package version, the meta tag contains the file URL:

<meta name="syidax-license" content="/licenses/syidax-license.json">

Chart and Grid are licensed independently. Installing this package does not activate both products; register the certificates for the rights you purchased. See plans and licensing for current options.

Explore Syidax

Core is optional for these chart and grid examples. If your app also uses Core Pro and needs to satisfy the optional @syidax/core peer, install it under that name with an npm alias:

npm install @syidax/core@npm:@syidax/core-pro @syidax/advanced-pro

Use @syidax/core/... imports for that alias, and keep only one Core edition in the app.

Ready to build your next screen? Browse the live components, try the examples, and choose the pieces your product needs. Prefer Korean? 한국어 사이트에서 제품과 문서를 살펴보세요.

License

Public npm access does not grant unrestricted or free commercial use. Community is for personal, non-commercial use under the included license. Commercial use and Pro features require the applicable license and product rights. See LICENSE.md for the complete terms and NOTICE.md for third-party attributions.

Package version: 1.0.4 · Website · Chart demos & docs · Grid demos & docs