# Configuration and data model

The shared sy-chart and individual tags are different entry points. Check the supported property names and types for each.

Canonical: https://chart.syidax.com/docs/concepts/

<a id="elements"></a>

## 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.

```html
<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 |

- [Shared configuration](https://chart.syidax.com/docs/options.md)
- [Contracts for direct tags](https://chart.syidax.com/docs/components.md)

<a id="attributes"></a>

## 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.

```javascript
chart.height = 360;
chart.xAxis = { kind: 'category', categories: ['A', 'B'] };
chart.series = [{ name: 'Quantity', values: [12, 18] }];
```

<a id="contracts"></a>

## 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.

<a id="runtime"></a>

## 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.

- [Method list](https://chart.syidax.com/docs/methods.md)
- [Event list](https://chart.syidax.com/docs/events.md)

<a id="export"></a>

## 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.

- [contextMenuItems](https://chart.syidax.com/docs/options/contextMenuItems.md)
- [Logo policy](https://chart.syidax.com/docs/branding.md)