sy-line-chart
Line
Read changes over time as lines.
sy-line-chart
Compare trends and differences between series with dates or an ordered sequence.
Use Column or Bar to compare unrelated categories. Distinguish interpolated curves from actual measurements.
Base chart tier: Community. Features such as additional renderers and custom branding have separate entitlement requirements.
| Input | Data description |
|---|---|
series | An array of series with names, colors, and values. Matching indices represent the same point in time. |
xAxis | Match category axis categories to the values order. |
yAxis | Use consistent units and ranges for values being compared. |
- Run in Components
Change options and view framework-specific code
- Shared installation and integration
Complete implementation example
<div id="chart-container" style="width: 100%; min-width: 0;"></div>
<script type="module">
import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-line-chart.js';
define0();
const specs = [
{
"id": "example-chart",
"tag": "sy-line-chart",
"props": {
"engine": "standard",
"series": [
{
"name": "Organic",
"color": "#8263d9",
"values": [24, 29, 27, 38, 43, 40, 52, 58, 53, 68, 76, 84]
},
{
"name": "Direct",
"color": "#239c91",
"values": [15, 19, 17, 24, 22, 29, 32, 30, 39, 42, 40, 51]
},
{
"name": "Referral",
"color": "#e99954",
"values": [8, 11, 9, 15, 13, 19, 17, 23, 22, 28, 25, 33]
}
],
"xAxis": {
"kind": "category",
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
"yAxis": {
"kind": "linear",
"min": 0
},
"smooth": "none",
"thickness": 2.5,
"marker": "circle",
"markerSize": 4,
"legend": true,
"tooltip": {
"show": true,
"mode": "shared"
},
"width": 640,
"height": 360,
"brandPosition": "bottom-right",
"brandLogo": ""
}
}
];
const container = document.querySelector('#chart-container');
const elements = specs.map(({ tag, id, props }) => {
const element = document.createElement(tag);
element.id = id;
Object.assign(element, props);
element.setAttribute('aria-label', 'line example chart');
return element;
});
container.replaceChildren(...elements);
const chart = elements.at(-1);
const onEvent = event => {
console.log('pointClick', event.detail);
};
chart.addEventListener('pointClick', onEvent);
const observer = new ResizeObserver(([entry]) => {
const width = Math.max(160, Math.floor(entry.contentRect.width));
elements.forEach(element => { element.width = width; });
});
observer.observe(container);
// In an SPA, call this function when the view is disposed.
function disposeChart() {
observer.disconnect();
chart.removeEventListener('pointClick', onEvent);
container.replaceChildren();
}
</script>Properties
series
An array of series with names, colors, and values. Matching indices represent the same point in time.
| Item | Value |
|---|---|
| JavaScript property | series |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | LineChartSeries[] |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- LineChartSeries
Type definition
activeSeriesIndex
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | activeSeriesIndex |
| HTML attribute | active-series-index |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
seriesState
Pass as a JavaScript property. type: LineChartSeriesStateOptions.
| Item | Value |
|---|---|
| JavaScript property | seriesState |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | LineChartSeriesStateOptions |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- LineChartSeriesStateOptions
Type definition
values
Values for a single series. Use the data type required by the selected chart, such as a number array for Line or coordinate array for Scatter. Assign arrays and objects as JavaScript properties.
| Item | Value |
|---|---|
| JavaScript property | values |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | LineChartValues |
| Default | new Float32Array(0) |
- LineChartValues
Type definition
width
Chart width in pixels. If the container width changes, update width from a ResizeObserver.
| Item | Value |
|---|---|
| JavaScript property | width |
| HTML attribute | width |
| Type | number |
| Default | 600 |
height
Chart height in pixels. Allow space for axes, titles, and the legend.
| Item | Value |
|---|---|
| JavaScript property | height |
| HTML attribute | height |
| Type | number |
| Default | 300 |
brandLogo
The default is the Syidax symbol and wordmark. With the Pro chart.branding entitlement, set none to remove it or provide a PNG, JPEG, or WebP data URL to replace it.
| Item | Value |
|---|---|
| JavaScript property | brandLogo |
| HTML attribute | brand-logo |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
brandPosition
The corner where the logo is anchored. Community and Pro both support all four corners, using the same position on screen and in image exports.
| Item | Value |
|---|---|
| JavaScript property | brandPosition |
| HTML attribute | brand-position |
| Type | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' |
| Default | 'bottom-right' |
| Allowed values | top-left, top-right, bottom-left, bottom-right |
color
Set as an HTML attribute or JavaScript property. type: string.
| Item | Value |
|---|---|
| JavaScript property | color |
| HTML attribute | color |
| Type | string |
| Default | '#2563eb' |
thickness
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | thickness |
| HTML attribute | thickness |
| Type | number |
| Default | 1 |
marker
Allowed values: none, circle, square, triangle, cross, diamond, star. Default: 'none'.
| Item | Value |
|---|---|
| JavaScript property | marker |
| HTML attribute | marker |
| Type | LineChartMarker |
| Default | 'none' |
| Allowed values | none, circle, square, triangle, cross, diamond, star |
- LineChartMarker
Type definition
markerSize
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | markerSize |
| HTML attribute | marker-size |
| Type | number |
| Default | 4 |
markerFilter
Pass as a JavaScript property. type: LineChartMarkerFilter.
| Item | Value |
|---|---|
| JavaScript property | markerFilter |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | LineChartMarkerFilter |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- LineChartMarkerFilter
Type definition
markerClickable
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | markerClickable |
| HTML attribute | marker-clickable |
| Type | boolean |
| Default | true |
markerActiveTrigger
Allowed values: hover, click, custom. Default: 'hover'.
| Item | Value |
|---|---|
| JavaScript property | markerActiveTrigger |
| HTML attribute | marker-active-trigger |
| Type | LineChartMarkerActiveTrigger |
| Default | 'hover' |
| Allowed values | hover, click, custom |
- LineChartMarkerActiveTrigger
Type definition
seriesActiveTrigger
Allowed values: hover, click, custom. Default: undefined.
| Item | Value |
|---|---|
| JavaScript property | seriesActiveTrigger |
| HTML attribute | series-active-trigger |
| Type | LineChartMarkerActiveTrigger |
| Default | undefined |
| Allowed values | hover, click, custom |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- LineChartMarkerActiveTrigger
Type definition
lineDash
Pass as a JavaScript property. type: number[].
| Item | Value |
|---|---|
| JavaScript property | lineDash |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | number[] |
| Default | [] |
connectNulls
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | connectNulls |
| HTML attribute | connect-nulls |
| Type | boolean |
| Default | false |
smooth
Allowed values: none, monotone, cardinal. Default: 'none'.
| Item | Value |
|---|---|
| JavaScript property | smooth |
| HTML attribute | smooth |
| Type | LineChartSmooth |
| Default | 'none' |
| Allowed values | none, monotone, cardinal |
- LineChartSmooth
Type definition
smoothTension
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | smoothTension |
| HTML attribute | smooth-tension |
| Type | number |
| Default | 0.5 |
step
Allowed values: none, left, right, center. Default: 'none'.
| Item | Value |
|---|---|
| JavaScript property | step |
| HTML attribute | step |
| Type | LineChartStep |
| Default | 'none' |
| Allowed values | none, left, right, center |
- LineChartStep
Type definition
baseline
Reference value on the y-axis. Lines do not grow from the baseline, but the baseline remains visible as a value-axis tick and marker so threshold comparisons stay explicit across all cartesian chart families.
| Item | Value |
|---|---|
| JavaScript property | baseline |
| HTML attribute | baseline |
| Type | number |
| Default | 0 |
engine
Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
| Item | Value |
|---|---|
| JavaScript property | engine |
| HTML attribute | engine |
| Type | LineChartEngineMode |
| Default | 'auto' |
| Allowed values | auto, standard, pro |
- LineChartEngineMode
Type definition
proThreshold
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | proThreshold |
| HTML attribute | pro-threshold |
| Type | number |
| Default | 100_000 |
streamSource
A stream source for live data. Check the contract for the specific type.
| Item | Value |
|---|---|
| JavaScript property | streamSource |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | LineChartStreamSource |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- LineChartStreamSource
Type definition
streamWindow
The streaming data range to keep visible.
| Item | Value |
|---|---|
| JavaScript property | streamWindow |
| HTML attribute | stream-window |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
streamMax
The maximum number of streaming data points to retain.
| Item | Value |
|---|---|
| JavaScript property | streamMax |
| HTML attribute | stream-max |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
frameBudget
milliseconds a drawn frame may take before the next scheduled frame is skipped (its appends land in the frame after). Default 16; 0 disables skipping (frames are still measured).
| Item | Value |
|---|---|
| JavaScript property | frameBudget |
| HTML attribute | frame-budget |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
streamWindowMs
an absolute time window: only points stamped within the last N ms are visible; it slides as points expire (a timed re-arm, not a frame loop) and overrides stream-window while set.
| Item | Value |
|---|---|
| JavaScript property | streamWindowMs |
| HTML attribute | stream-window-ms |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
streamTimestamps
(carry-over A1) — whether the internal ring stamps every point (a Float64 per slot: 8 MB at a 1M capacity). on (default) keeps the stamps an absolute stream-window-ms resolves through; off is the opt-out for charts that only ever use a count window (an absolute window then has nothing to resolve and falls back to stream-window).
| Item | Value |
|---|---|
| JavaScript property | streamTimestamps |
| HTML attribute | stream-timestamps |
| Type | 'on' | 'off' |
| Default | undefined |
| Allowed values | off, on |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
animated
Whether to animate initial display and data changes.
| Item | Value |
|---|---|
| JavaScript property | animated |
| HTML attribute | animate |
| Type | boolean |
| Default | false |
animationDuration
Animation duration in milliseconds.
| Item | Value |
|---|---|
| JavaScript property | animationDuration |
| HTML attribute | animation-duration |
| Type | number |
| Default | 200 |
animationEasing
Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
| Item | Value |
|---|---|
| JavaScript property | animationEasing |
| HTML attribute | animation-easing |
| Type | LineChartEasing |
| Default | 'ease-out' |
| Allowed values | linear, ease-out, ease-in, ease-in-out |
- LineChartEasing
Type definition
animationType
Allowed values: initial, update. Default: undefined.
| Item | Value |
|---|---|
| JavaScript property | animationType |
| HTML attribute | animation-type |
| Type | LineChartAnimationType |
| Default | undefined |
| Allowed values | initial, update |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- LineChartAnimationType
Type definition
legend
Whether to show a legend for series or items.
| Item | Value |
|---|---|
| JavaScript property | legend |
| HTML attribute | legend |
| Type | boolean |
| Default | false |
legendPosition
Where the legend is positioned.
| Item | Value |
|---|---|
| JavaScript property | legendPosition |
| HTML attribute | legend-position |
| Type | LineChartLegendPosition |
| Default | 'bottom' |
| Allowed values | top, bottom, left, right, float |
- LineChartLegendPosition
Type definition
legendItems
Pass as a JavaScript property. type: LegendItem[].
| Item | Value |
|---|---|
| JavaScript property | legendItems |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | LegendItem[] |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- LegendItem
Type definition
seriesName
Set as an HTML attribute or JavaScript property. type: string.
| Item | Value |
|---|---|
| JavaScript property | seriesName |
| HTML attribute | series-name |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
legendFloatAlign
Allowed values: start, center, end. Default: 'end'.
| Item | Value |
|---|---|
| JavaScript property | legendFloatAlign |
| HTML attribute | legend-float-align |
| Type | 'start' | 'center' | 'end' |
| Default | 'end' |
| Allowed values | start, center, end |
legendFloatVerticalAlign
Allowed values: top, bottom, middle. Default: 'top'.
| Item | Value |
|---|---|
| JavaScript property | legendFloatVerticalAlign |
| HTML attribute | legend-float-vertical-align |
| Type | 'top' | 'middle' | 'bottom' |
| Default | 'top' |
| Allowed values | top, bottom, middle |
legendDraggable
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | legendDraggable |
| HTML attribute | legend-draggable |
| Type | boolean |
| Default | false |
xAxis
Match category axis categories to the values order.
| Item | Value |
|---|---|
| JavaScript property | xAxis |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianAxisInput | ReadonlyArray<CartesianAxisInput> |
| Default | undefined |
| Literals in the type | auto, off |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianAxisInput
Type definition
yAxis
Use consistent units and ranges for values being compared.
| Item | Value |
|---|---|
| JavaScript property | yAxis |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianYAxisInput |
| Default | undefined |
| Literals in the type | auto, off |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianYAxisInput
Type definition
chartTitle
The title inside the chart. Explain the data's unit and meaning alongside it.
| Item | Value |
|---|---|
| JavaScript property | chartTitle |
| HTML attribute | chart-title |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
chartSubtitle
The subtitle inside the chart.
| Item | Value |
|---|---|
| JavaScript property | chartSubtitle |
| HTML attribute | chart-subtitle |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
tooltip
Tooltip settings for pointer-driven values, position, and content.
| Item | Value |
|---|---|
| JavaScript property | tooltip |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianTooltipInput |
| Default | undefined |
| Literals in the type | auto, off |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianTooltipInput
Type definition
crosshair
Pass as a JavaScript property. type: CartesianCrosshairInput.
| Item | Value |
|---|---|
| JavaScript property | crosshair |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianCrosshairInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianCrosshairInput
Type definition
gridLines
Allowed values: auto, off. Default: undefined.
| Item | Value |
|---|---|
| JavaScript property | gridLines |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianGridLinesInput |
| Default | undefined |
| Literals in the type | auto, off |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianGridLinesInput
Type definition
zoom
zoom: 'x' | 'y' | 'xy' | true (x) enable the drag rectangle + keyboard (+ / - / Escape) on the primary axes; an object refines mode / drag / keyboard / minRangePx / resetButton. Off by default. zoomTo / zoomBy / resetZoom work regardless of the gesture switches.
| Item | Value |
|---|---|
| JavaScript property | zoom |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianZoomInput |
| Default | undefined |
| Literals in the type | auto, off, true, false, x, y, xy, inside |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianZoomInput
Type definition
brush
brush selection: 'rect' | true | { type, mode, modifier, minSizePx, keyboard, clearOnClick }; off by default.
| Item | Value |
|---|---|
| JavaScript property | brush |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianBrushInput |
| Default | undefined |
| Literals in the type | auto, off, true, false, rect, lasso |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianBrushInput
Type definition
drawings
the drawing document: a list of drawings, a serialized envelope, or a JSON string of either (replaces the document; the history restarts).
| Item | Value |
|---|---|
| JavaScript property | drawings |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | ChartDrawingsInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- ChartDrawingsInput
Type definition
drawingMode
the pointer disposition: 'none' (default), 'draw' (the plain drag places drawingTool; precedence drawing > brush > zoom > pan), 'select' ().
| Item | Value |
|---|---|
| JavaScript property | drawingMode |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | DrawingModeInput |
| Default | undefined |
| Literals in the type | none, off, true, false, draw, select |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- DrawingModeInput
Type definition
drawingTool
the tool drawingMode="draw" places (a registered tool name; default 'segment').
| Item | Value |
|---|---|
| JavaScript property | drawingTool |
| HTML attribute | drawing-tool |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
drawingSpace
the space new drawings are anchored in: 'data' (default — the primary axes) or 'pixel' (offsets from the plot's top-left; they stay put under zoom, pan and data changes).
| Item | Value |
|---|---|
| JavaScript property | drawingSpace |
| HTML attribute | drawing-space |
| Type | DrawingSpace |
| Default | undefined |
| Allowed values | data, pixel |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- DrawingSpace
Type definition
visualMap
a visual map binding (a sy-visual-map snapshot + the data dimension): every mark is coloured through it.
| Item | Value |
|---|---|
| JavaScript property | visualMap |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | VisualMapBinding | null |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- VisualMapBinding
Type definition
Events
rendered
Emits rendering results in detail when chart drawing completes.
Event name: rendered. Names are case-sensitive. Read the payload from detail on CustomEvent<LineChartRenderResult & { tier: LineChartEngineTier; budget?: LineChartFrameBudgetInfo; stream?: LineChartStreamFrameInfo }>.
chart.addEventListener('rendered', event => {
console.log(event.detail); // LineChartRenderResult & { tier: LineChartEngineTier; budget?: LineChartFrameBudgetInfo; stream?: LineChartStreamFrameInfo }
});- LineChartRenderResult
Type definition
- LineChartEngineTier
Type definition
- LineChartFrameBudgetInfo
Type definition
- LineChartStreamFrameInfo
Type definition
frameBudgetReport
a scheduled frame was skipped (the previous one overran the budget, or the GPU is behind), or a drawn frame overran.
Event name: frameBudgetReport. Names are case-sensitive. Read the payload from detail on CustomEvent<LineChartFrameBudgetEventDetail>.
chart.addEventListener('frameBudgetReport', event => {
console.log(event.detail); // LineChartFrameBudgetEventDetail
});- LineChartFrameBudgetEventDetail
Type definition
appended
CustomEvent.detail type: { count: number }. Event names are case-sensitive.
Event name: appended. Names are case-sensitive. Read the payload from detail on CustomEvent<{ count: number }>.
chart.addEventListener('appended', event => {
console.log(event.detail); // { count: number }
});windowSlid
CustomEvent.detail type: { dropped: number }. Event names are case-sensitive.
Event name: windowSlid. Names are case-sensitive. Read the payload from detail on CustomEvent<{ dropped: number }>.
chart.addEventListener('windowSlid', event => {
console.log(event.detail); // { dropped: number }
});chartAnimationStart
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationStart. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationStart', event => {
console.log(event.detail); // void
});chartAnimationEnd
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationEnd. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationEnd', event => {
console.log(event.detail); // void
});chartAnimationInterrupted
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationInterrupted. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationInterrupted', event => {
console.log(event.detail); // void
});pointHover
CustomEvent.detail type: LineChartPointEventDetail | null. Event names are case-sensitive.
Event name: pointHover. Names are case-sensitive. Read the payload from detail on CustomEvent<LineChartPointEventDetail | null>.
chart.addEventListener('pointHover', event => {
console.log(event.detail); // LineChartPointEventDetail | null
});- LineChartPointEventDetail
Type definition
pointClick
A point selection event. Read the selected data and index from CustomEvent.detail.
Event name: pointClick. Names are case-sensitive. Read the payload from detail on CustomEvent<LineChartPointEventDetail>.
chart.addEventListener('pointClick', event => {
console.log(event.detail); // LineChartPointEventDetail
});- LineChartPointEventDetail
Type definition
pointContextMenu
CustomEvent.detail type: ChartPointContextMenuEventDetail<LineChartPointEventDetail>. Event names are case-sensitive.
Event name: pointContextMenu. Names are case-sensitive. Read the payload from detail on CustomEvent<ChartPointContextMenuEventDetail<LineChartPointEventDetail>>.
chart.addEventListener('pointContextMenu', event => {
console.log(event.detail); // ChartPointContextMenuEventDetail<LineChartPointEventDetail>
});- ChartPointContextMenuEventDetail
Type definition
- LineChartPointEventDetail
Type definition
seriesClick
CustomEvent.detail type: { cssX: number; cssY: number }. Event names are case-sensitive.
Event name: seriesClick. Names are case-sensitive. Read the payload from detail on CustomEvent<{ cssX: number; cssY: number }>.
chart.addEventListener('seriesClick', event => {
console.log(event.detail); // { cssX: number; cssY: number }
});seriesOutsideClick
CustomEvent.detail type: CartesianSeriesOutsideClickEventDetail. Event names are case-sensitive.
Event name: seriesOutsideClick. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianSeriesOutsideClickEventDetail>.
chart.addEventListener('seriesOutsideClick', event => {
console.log(event.detail); // CartesianSeriesOutsideClickEventDetail
});- CartesianSeriesOutsideClickEventDetail
Type definition
legendItemClick
CustomEvent.detail type: LineChartLegendItemEventDetail. Event names are case-sensitive.
Event name: legendItemClick. Names are case-sensitive. Read the payload from detail on CustomEvent<LineChartLegendItemEventDetail>.
chart.addEventListener('legendItemClick', event => {
console.log(event.detail); // LineChartLegendItemEventDetail
});- LineChartLegendItemEventDetail
Type definition
seriesToggled
CustomEvent.detail type: LineChartSeriesToggledEventDetail. Event names are case-sensitive.
Event name: seriesToggled. Names are case-sensitive. Read the payload from detail on CustomEvent<LineChartSeriesToggledEventDetail>.
chart.addEventListener('seriesToggled', event => {
console.log(event.detail); // LineChartSeriesToggledEventDetail
});- LineChartSeriesToggledEventDetail
Type definition
crosshairMove
CustomEvent.detail type: CartesianCrosshairEventDetail | null. Event names are case-sensitive.
Event name: crosshairMove. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianCrosshairEventDetail | null>.
chart.addEventListener('crosshairMove', event => {
console.log(event.detail); // CartesianCrosshairEventDetail | null
});- CartesianCrosshairEventDetail
Type definition
tooltipShow
Whether to display the built-in tooltip.
Event name: tooltipShow. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianTooltipEventDetail>.
chart.addEventListener('tooltipShow', event => {
console.log(event.detail); // CartesianTooltipEventDetail
});- CartesianTooltipEventDetail
Type definition
tooltipHide
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: tooltipHide. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('tooltipHide', event => {
console.log(event.detail); // void
});tooltipAction
CustomEvent.detail type: CartesianTooltipActionEventDetail. Event names are case-sensitive.
Event name: tooltipAction. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianTooltipActionEventDetail>.
chart.addEventListener('tooltipAction', event => {
console.log(event.detail); // CartesianTooltipActionEventDetail
});- CartesianTooltipActionEventDetail
Type definition
zoomChange
fired after every zoom change (drag / keyboard / api / reset) with the new state.
Event name: zoomChange. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianZoomChangeEventDetail>.
chart.addEventListener('zoomChange', event => {
console.log(event.detail); // CartesianZoomChangeEventDetail
});- CartesianZoomChangeEventDetail
Type definition
brushChange
the brush areas / selection changed (drag, api, clear, keyboard).
Event name: brushChange. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianBrushChangeEventDetail>.
chart.addEventListener('brushChange', event => {
console.log(event.detail); // CartesianBrushChangeEventDetail
});- CartesianBrushChangeEventDetail
Type definition
brushStart
a brush drag opened up (once per gesture).
Event name: brushStart. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianBrushStartEventDetail>.
chart.addEventListener('brushStart', event => {
console.log(event.detail); // CartesianBrushStartEventDetail
});- CartesianBrushStartEventDetail
Type definition
brushMove
a live frame of the drag (throttled; the selection only with liveSelection).
Event name: brushMove. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianBrushMoveEventDetail>.
chart.addEventListener('brushMove', event => {
console.log(event.detail); // CartesianBrushMoveEventDetail
});- CartesianBrushMoveEventDetail
Type definition
brushEnd
the drag released (after brushChange), or was cancelled.
Event name: brushEnd. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianBrushEndEventDetail>.
chart.addEventListener('brushEnd', event => {
console.log(event.detail); // CartesianBrushEndEventDetail
});- CartesianBrushEndEventDetail
Type definition
drawingsChange
the drawing document changed (a placement, the api, undo / redo, clear, the prop).
Event name: drawingsChange. Names are case-sensitive. Read the payload from detail on CustomEvent<DrawingsChangeEventDetail>.
chart.addEventListener('drawingsChange', event => {
console.log(event.detail); // DrawingsChangeEventDetail
});- DrawingsChangeEventDetail
Type definition
drawingSelectionChange
the drawing selection changed (a click, a marquee, the api, Escape, a document change pruning it).
Event name: drawingSelectionChange. Names are case-sensitive. Read the payload from detail on CustomEvent<DrawingSelectionChangeEventDetail>.
chart.addEventListener('drawingSelectionChange', event => {
console.log(event.detail); // DrawingSelectionChangeEventDetail
});- DrawingSelectionChangeEventDetail
Type definition
Methods
appendPoint
Append one value to the stream. Check the argument type and the licensing requirements for streaming.
appendPoint(value: number): Promise<void>| Arguments | Type | Required |
|---|---|---|
value | number | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
appendBatch
Append multiple values to the stream. Check the argument type and the licensing requirements for streaming.
appendBatch(values: ReadonlyArray<number> | Float32Array): Promise<void>| Arguments | Type | Required |
|---|---|---|
values | ReadonlyArray<number> | Float32Array | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
shift
Drop the oldest streamed categories (the data boxes are not the stream).
shift(count: number): Promise<void>| Arguments | Type | Required |
|---|---|---|
count | number | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
replace
Swap the streamed set (replace([]) clears it); the base values never leave. Without chart.streaming the dies upsert into the base like a batch (quietly: no appended, no binChanged, as a ring replace).
replace(values: ReadonlyArray<number> | Float32Array): Promise<void>| Arguments | Type | Required |
|---|---|---|
values | ReadonlyArray<number> | Float32Array | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
getStreamSource
The stream session's source (a Chart Pro feature): like the stream methods it waits for a license still being confirmed.
getStreamSource(): Promise<LineChartStreamSource | undefined>Return type: Promise<LineChartStreamSource | undefined>. Call the method after element registration and await its Promise result.
- LineChartStreamSource
Type definition
getEngineStatus
The requested engine, the engine that draws and why . A Chart Pro license decision names chart.webgpu and its state; renderer causes (not in this build, no WebGPU, a failed GPU) stay apart.
getEngineStatus(): Promise<ChartEngineStatus>Return type: Promise<ChartEngineStatus>. Call the method after element registration and await its Promise result.
- ChartEngineStatus
Type definition
setAnimation
An asynchronous method. Check the argument and return types below.
setAnimation(options: { duration?: number; easing?: LineChartEasing; enabled?: boolean; type?: LineChartAnimationType }): Promise<void>| Arguments | Type | Required |
|---|---|---|
options | { duration?: number; easing?: LineChartEasing; enabled?: boolean; type?: LineChartAnimationType } | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- LineChartEasing
Type definition
- LineChartAnimationType
Type definition
pauseAnimation
Pause the current animation.
pauseAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
resumeAnimation
Resume a paused animation.
resumeAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
showTooltipAtPoint
Open the tooltip for a dot programmatically. pointIndex is the category (row) index; the optional seriesIndex selects a group within that row (defaults to the first visible group's dot in the row). Returns the emitted tooltip detail, or null when no dot resolves / the tooltip is disabled.
showTooltipAtPoint(pointIndex: number): Promise<CartesianTooltipEventDetail | null>| Arguments | Type | Required |
|---|---|---|
pointIndex | number | Required |
Return type: Promise<CartesianTooltipEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianTooltipEventDetail
Type definition
hideTooltip
Close the currently visible tooltip.
hideTooltip(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
zoomTo
zoom to explicit windows: x / y as { min, max } or [min, max] (null clears that orientation); xAxis / yAxis name the axis by id or slot index (default: the primary axis).
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
request | CartesianZoomRequest | Required |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
- CartesianZoomRequest
Type definition
zoomBy
scale the current windows by factor (< 1 zooms in) around anchorFraction (0..1, default centre).
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
factor | number | Required |
anchorFraction | number | Optional |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
panBy
slide the zoomed windows by data units ({ x?, y? }); a no-op at the full extent.
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
delta | { x?: number; y?: number } | Required |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
resetZoom
Reset the zoomed or panned range to the original data range.
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
getZoom
Read the current zoom range. Check the return type's nullability and the range for each axis.
getZoom(): Promise<CartesianZoomState | null>Return type: Promise<CartesianZoomState | null>. Call the method after element registration and await its Promise result.
- CartesianZoomState
Type definition
getZoomExtent
the full extent (and key) of the primary — or the named — master axes (null before the first layout).
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>| Arguments | Type | Required |
|---|---|---|
request | CartesianZoomExtentRequest | Optional |
Return type: Promise<CartesianZoomExtentDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomExtentDetail
Type definition
- CartesianZoomExtentRequest
Type definition
showCrosshairAt
show the crosshair at a data position (a linked chart's cursor) without emitting crosshairMove; false when it falls outside the plot.
showCrosshairAt(request: CartesianCrosshairShowRequest): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
request | CartesianCrosshairShowRequest | Required |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
- CartesianCrosshairShowRequest
Type definition
hideCrosshair
hide the crosshair shown by showCrosshairAt (or the pointer's).
hideCrosshair(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
getDrawings
the drawings of the document (data-space anchors).
getDrawings(): Promise<ChartDrawing[]>Return type: Promise<ChartDrawing[]>. Call the method after element registration and await its Promise result.
- ChartDrawing
Type definition
setDrawings
replace the document from script (null clears); the history keeps the previous document as an undo step.
setDrawings(drawings: ReadonlyArray<ChartDrawingInput> | null): Promise<DrawingsChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
drawings | ReadonlyArray<ChartDrawingInput> | null | Required |
Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- DrawingsChangeEventDetail
Type definition
- ChartDrawingInput
Type definition
addDrawing
add one drawing (an explicit id replaces); answers the resolved drawing, or null when the input was malformed.
addDrawing(drawing: ChartDrawingInput): Promise<ChartDrawing | null>| Arguments | Type | Required |
|---|---|---|
drawing | ChartDrawingInput | Required |
Return type: Promise<ChartDrawing | null>. Call the method after element registration and await its Promise result.
- ChartDrawing
Type definition
- ChartDrawingInput
Type definition
updateDrawing
merge a patch into one drawing (anchors, style, visible, locked, options, meta).
updateDrawing(id: string, patch: Partial<Omit<ChartDrawing, 'id'>>): Promise<ChartDrawing | null>| Arguments | Type | Required |
|---|---|---|
id | string | Required |
patch | Partial<Omit<ChartDrawing, 'id'>> | Required |
Return type: Promise<ChartDrawing | null>. Call the method after element registration and await its Promise result.
- ChartDrawing
Type definition
removeDrawing
remove one drawing.
removeDrawing(id: string): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
id | string | Required |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
removeDrawings
remove several drawings in one undoable step (locked / unknown ids are skipped); the selection prunes itself.
removeDrawings(ids: ReadonlyArray<string>): Promise<DrawingsChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
ids | ReadonlyArray<string> | Required |
Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- DrawingsChangeEventDetail
Type definition
setDrawingSpace
move a drawing to the other coordinate space at the current frame (its anchors convert, nothing moves on screen); one undoable step.
setDrawingSpace(id: string, space: DrawingSpace): Promise<ChartDrawing | null>| Arguments | Type | Required |
|---|---|---|
id | string | Required |
space | DrawingSpace | Required |
Return type: Promise<ChartDrawing | null>. Call the method after element registration and await its Promise result.
- ChartDrawing
Type definition
- DrawingSpace
Type definition
clearDrawings
clear the document (undoable).
clearDrawings(): Promise<DrawingsChangeEventDetail | null>Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- DrawingsChangeEventDetail
Type definition
undoDrawing
undo the last document change; null when there is nothing to undo.
undoDrawing(): Promise<DrawingsChangeEventDetail | null>Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- DrawingsChangeEventDetail
Type definition
redoDrawing
redo the last undone change; null when there is nothing to redo.
redoDrawing(): Promise<DrawingsChangeEventDetail | null>Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- DrawingsChangeEventDetail
Type definition
getDrawingLayer
the drawing overlay as a standalone SVG layer in host pixels (selection chrome and the placement preview stripped; null without drawings) — what the facade composes into the image export.
getDrawingLayer(): Promise<DrawingLayerSnapshot | null>Return type: Promise<DrawingLayerSnapshot | null>. Call the method after element registration and await its Promise result.
- DrawingLayerSnapshot
Type definition
exportDrawings
the document as its versioned JSON envelope (feed it back through drawings or importDrawings).
exportDrawings(): Promise<string>Return type: Promise<string>. Call the method after element registration and await its Promise result.
importDrawings
replace the document from an envelope / list / JSON string (undoable; malformed rows drop).
importDrawings(input: ChartDrawingsInput): Promise<DrawingsChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
input | ChartDrawingsInput | Required |
Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- DrawingsChangeEventDetail
Type definition
- ChartDrawingsInput
Type definition
selectDrawings
select drawings from script (null / [] clears); unknown ids are dropped.
selectDrawings(ids: ReadonlyArray<string> | null): Promise<DrawingSelectionChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
ids | ReadonlyArray<string> | null | Required |
Return type: Promise<DrawingSelectionChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- DrawingSelectionChangeEventDetail
Type definition
getDrawingSelection
the selected drawing ids.
getDrawingSelection(): Promise<string[]>Return type: Promise<string[]>. Call the method after element registration and await its Promise result.
setBrush
replace the brush areas from script (null clears); brushChange fires with source 'api'.
setBrush(areas: ReadonlyArray<CartesianBrushAreaInput> | null): Promise<CartesianBrushChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
areas | ReadonlyArray<CartesianBrushAreaInput> | null | Required |
Return type: Promise<CartesianBrushChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianBrushChangeEventDetail
Type definition
- CartesianBrushAreaInput
Type definition
clearBrush
clear the brush areas (brushChange with source 'clear').
clearBrush(): Promise<CartesianBrushChangeEventDetail | null>Return type: Promise<CartesianBrushChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianBrushChangeEventDetail
Type definition
getBrush
the persisted brush areas (primary data space).
getBrush(): Promise<CartesianBrushArea[]>Return type: Promise<CartesianBrushArea[]>. Call the method after element registration and await its Promise result.
- CartesianBrushArea
Type definition
getBrushSelection
the points inside the brush areas, against the current layout.
getBrushSelection(): Promise<CartesianBrushSelectedSeries[]>Return type: Promise<CartesianBrushSelectedSeries[]>. Call the method after element registration and await its Promise result.
- CartesianBrushSelectedSeries
Type definition
setVisualMap
Bind (or clear) a visual map: every mark is coloured through it on the next paint.
setVisualMap(binding: VisualMapBinding | null): Promise<VisualMapBinding | null>| Arguments | Type | Required |
|---|---|---|
binding | VisualMapBinding | null | Required |
Return type: Promise<VisualMapBinding | null>. Call the method after element registration and await its Promise result.
- VisualMapBinding
Type definition
getVisualMap
An asynchronous method. Check the argument and return types below.
getVisualMap(): Promise<VisualMapBinding | null>Return type: Promise<VisualMapBinding | null>. Call the method after element registration and await its Promise result.
- VisualMapBinding
Type definition
getVisualExtent
The extent of a dimension over the visible points — what a bound sy-visual-map adopts as its domain.
getVisualExtent(request?: VisualMapExtentRequest): Promise<VisualMapExtent | null>| Arguments | Type | Required |
|---|---|---|
request | VisualMapExtentRequest | Optional |
Return type: Promise<VisualMapExtent | null>. Call the method after element registration and await its Promise result.
- VisualMapExtent
Type definition
- VisualMapExtentRequest
Type definition
hitTestMarker
An asynchronous method. Check the argument and return types below.
hitTestMarker(clientX: number, clientY: number): Promise<LineChartPointEventDetail | null>| Arguments | Type | Required |
|---|---|---|
clientX | number | Required |
clientY | number | Required |
Return type: Promise<LineChartPointEventDetail | null>. Call the method after element registration and await its Promise result.
- LineChartPointEventDetail
Type definition
hitTestMarkers
An asynchronous method. Check the argument and return types below.
hitTestMarkers(clientX: number, clientY: number): Promise<LineChartPointEventDetail[]>| Arguments | Type | Required |
|---|---|---|
clientX | number | Required |
clientY | number | Required |
Return type: Promise<LineChartPointEventDetail[]>. Call the method after element registration and await its Promise result.
- LineChartPointEventDetail
Type definition
redraw
Redraw the chart using its current data and options. Inspect the rendered result after the returned Promise resolves.
redraw(): Promise<LineChartRenderResult>Return type: Promise<LineChartRenderResult>. Call the method after element registration and await its Promise result.
- LineChartRenderResult
Type definition
getActiveTier
An asynchronous method. Check the argument and return types below.
getActiveTier(): Promise<LineChartEngineTier>Return type: Promise<LineChartEngineTier>. Call the method after element registration and await its Promise result.
- LineChartEngineTier
Type definition
addSeries
An asynchronous method. Check the argument and return types below.
addSeries(options: LineChartSeries, opts?: { redraw?: boolean; insertAt?: number }): Promise<number>| Arguments | Type | Required |
|---|---|---|
options | LineChartSeries | Required |
opts | { redraw?: boolean; insertAt?: number } | Optional |
Return type: Promise<number>. Call the method after element registration and await its Promise result.
- LineChartSeries
Type definition
removeSeries
An asynchronous method. Check the argument and return types below.
removeSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
idOrIndex | string | number | Required |
opts | { redraw?: boolean } | Optional |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
updateSeries
An asynchronous method. Check the argument and return types below.
updateSeries(idOrIndex: string | number, patch: Partial<LineChartSeries>, opts?: { redraw?: boolean }): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
idOrIndex | string | number | Required |
patch | Partial<LineChartSeries> | Required |
opts | { redraw?: boolean } | Optional |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
- LineChartSeries
Type definition
setSeriesData
An asynchronous method. Check the argument and return types below.
setSeriesData(idOrIndex: string | number, data: LineChartValues, opts?: { redraw?: boolean }): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
idOrIndex | string | number | Required |
data | LineChartValues | Required |
opts | { redraw?: boolean } | Optional |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
- LineChartValues
Type definition
addPoint
An asynchronous method. Check the argument and return types below.
addPoint(idOrIndex: string | number, point: number, opts?: { shift?: boolean; redraw?: boolean }): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
idOrIndex | string | number | Required |
point | number | Required |
opts | { shift?: boolean; redraw?: boolean } | Optional |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
showSeries
An asynchronous method. Check the argument and return types below.
showSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
idOrIndex | string | number | Required |
opts | { redraw?: boolean } | Optional |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
hideSeries
An asynchronous method. Check the argument and return types below.
hideSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
idOrIndex | string | number | Required |
opts | { redraw?: boolean } | Optional |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.