@syidax/advanced

Syidax Chart & Grid Community

Turn your data into something people can explore.

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. Plot a trend, sort a table, and build your first dashboard without switching component systems.

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

Start with the Community component 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/css/chart';
import '@syidax/advanced/css/grid';
import { defineCustomElement as defineLineChart } from '@syidax/advanced/components/sy-line-chart.js';
import { defineCustomElement as defineGrid } from '@syidax/advanced/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';
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/dist/assets/style/chart.css",
    "node_modules/@syidax/advanced/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/components/sy-line-chart.js';
import { defineCustomElement as defineGrid } from '@syidax/advanced/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.

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

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