SYIDAX CHARTS
Configuration and data model
The shared sy-chart and individual tags are different entry points. Check the supported property names and types for each.
Shared facade and direct tags
sy-chart is a shared entry point that selects a chart with type. A direct tag such as sy-line-chart exposes that chart's API. Not every facade option works with every type. Choose a chart, then review its data contract alongside the related types of the shared options.
<sy-chart type="line" height="360"></sy-chart>
<sy-line-chart height="360"></sy-line-chart>| Direct tag | Direct property | sy-chart property |
|---|---|---|
| sy-icicle | direction | icicleDirection |
| sy-dendrogram | direction | dendrogramDirection |
| sy-flow-lines | routePath | flowLinesPath |
| sy-theme-river | offset | themeRiverOffset |
Attributes and properties
Set simple values in HTML, such as height="360". In JavaScript, use case-sensitive property names, such as chart.height = 360. Pass objects, arrays, TypedArrays, and functions as JavaScript properties. Each option page lists both names and the exact type.
chart.height = 360;
chart.xAxis = { kind: 'category', categories: ['A', 'B'] };
chart.series = [{ name: 'Quantity', values: [12, 18] }];Read types and defaults
undefined means unset, unlike 0, false, or an empty array. A question mark (?) marks an optional field or argument. Defaults are shown as declared in the source; the effective result may depend on the selected chart, theme, and data. Select an object type name to read its complete declaration and related types.
Methods and events
Call public methods after the element is defined. Methods return Promises, so use await to read their results. Subscribe with addEventListener and read CustomEvent.detail. Event names are case-sensitive.
Export and menus
Enable the built-in export menu with contextmenu. contextMenuItems appends custom items after the built-in items. Image exports such as PNG and SVG follow the logo policy; data files such as CSV do not include logos.