Chart properties.
From simple attributes to structured data, responsive sizing, and logos.
Attributes and JavaScript properties
#Set strings, numbers, and booleans through attributes. Pass objects, arrays, and functions as JavaScript properties. Omitting a boolean attribute preserves its default, so property assignment is clearer for explicit false values.
<sy-line-chart id="trend" width="640" height="360" brand-position="top-left"></sy-line-chart>
<script type="module">
await customElements.whenDefined('sy-line-chart');
const chart = document.querySelector('#trend');
chart.series = [{ name: 'Visitors', values: [24, 29, 27], color: '#8263d9' }];
chart.xAxis = { kind: 'category', categories: ['Jan', 'Feb', 'Mar'] };
chart.yAxis = { kind: 'linear', min: 0 };
chart.legend = true;
chart.animated = false;
</script>New data and responsive sizing
#Assign a new array when observations change. Observe the container's actual width and clean up subscriptions when disposing of the view. Supported methods such as appendBatch and replace are documented in each chart's API reference.
const chart = document.querySelector('#trend');
chart.series = chart.series.map(series => ({
...series,
values: series.values.map((value, index) => index === 2 ? 35 : value)
}));
const container = chart.parentElement;
const observer = new ResizeObserver(([entry]) => {
chart.width = Math.max(160, Math.floor(entry.contentRect.width));
});
observer.observe(container);
// Call observer.disconnect() when disposing of the view.Shared sy-chart API versus direct tags
#Individual chart guides use sy-line-chart·sy-sankey and other direct tags with their specific APIs. The shared facade sy-chart: type selects the chart type and provides type switching, a shared menu, a data table, and export.
Pass basic input through type·series·values·data. Specialized option names and types may differ from direct tags, so check the mapping below and the shared API. Logo properties brandLogo·brandPosition use the same names.
Key shared properties
| Property | Type / Default |
|---|---|
type | ChartType'line' |
brand-logo | stringundefined |
brand-position | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right''bottom-right' |
series | LineChartSeries[] | ScatterChartSeries[]undefined |
values | LineChartValues | ScatterChartValuesnew Float32Array(0) |
engine | LineChartEngineMode'auto' |
data | RadarChartData | FunnelChartData | ReadonlyArray<DumbbellDatum> | ReadonlyArray<DotPlotDatum> | ReadonlyArray<TornadoDatum> | ReadonlyArray<VariwideDatum> | ChordData | NetworkGraphData | TreemapData | SankeyData | ErrorBarData | WaterfallData | BubbleData | BoxPlotData | CandlestickData | CalendarHeatmapData | SpectrogramInput | DensityMapInput | HeatmapData | SunburstData | IcicleData | GanttData | ParallelCoordinatesData | DendrogramData | GeoMapData | Surface3DData | Scatter3DData | FlowLinesData | ThemeRiverData | Bar3DDataundefined |
contextmenu | booleanfalse |
context-menu-items | ChartMenuItem[]undefined |
theme | ChartThemeName | ChartThemeundefined |
The export menu retains its built-in items, and contextMenuItems adds custom items. For all properties, events, and methods, see Shared API reference; for logo settings, see Logos and positioning.
Option mapping between direct tags and facade
| chart | Direct tag | sy-chart |
|---|---|---|
| Line·Area·Column·Bar | series / values / xAxis / yAxis | Same name |
| Pie·Item·Word Cloud | values | values |
| Most Pro charts | data | data |
| Icicle | direction | icicleDirection |
| Dendrogram | direction | dendrogramDirection |
| Flow Lines | routePath | flowLinesPath |
| Theme River | offset / order | themeRiverOffset / themeRiverOrder |
| Scatter 3D | marker | scatter3dMarker |
| Wafer Map | orientation | waferOrientation |
| Logo | brandLogo / brandPosition | Same name |
The table above lists common mappings. Before copying direct-tag options to the facade, check Shared API for the correct names and types.
<sy-chart id="hierarchy" type="icicle" brand-position="bottom-left"></sy-chart>
<script type="module">
// Register sy-chart and sy-icicle from the Pro package and register a license first.
await customElements.whenDefined('sy-chart');
const chart = document.querySelector('#hierarchy');
chart.icicleDirection = 'left-right';
chart.data = [{ id: 'all', label: 'All', children: [
{ id: 'a', label: 'A', value: 60 },
{ id: 'b', label: 'B', value: 40 }
] }];
</script>