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.

InputData description
seriesAn array of series with names, colors, and values. Matching indices represent the same point in time.
xAxisMatch category axis categories to the values order.
yAxisUse consistent units and ranges for values being compared.

Complete implementation example

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

ItemValue
JavaScript propertyseries
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeLineChartSeries[]
Defaultundefined

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

activeSeriesIndex

Set as an HTML attribute or JavaScript property. type: number.

ItemValue
JavaScript propertyactiveSeriesIndex
HTML attributeactive-series-index
Typenumber
Defaultundefined

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.

ItemValue
JavaScript propertyseriesState
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeLineChartSeriesStateOptions
Defaultundefined

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

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.

ItemValue
JavaScript propertyvalues
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeLineChartValues
Defaultnew Float32Array(0)

width

Chart width in pixels. If the container width changes, update width from a ResizeObserver.

ItemValue
JavaScript propertywidth
HTML attributewidth
Typenumber
Default600

height

Chart height in pixels. Allow space for axes, titles, and the legend.

ItemValue
JavaScript propertyheight
HTML attributeheight
Typenumber
Default300

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.

ItemValue
JavaScript propertybrandPosition
HTML attributebrand-position
Type'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
Default'bottom-right'
Allowed valuestop-left, top-right, bottom-left, bottom-right

color

Set as an HTML attribute or JavaScript property. type: string.

ItemValue
JavaScript propertycolor
HTML attributecolor
Typestring
Default'#2563eb'

thickness

Set as an HTML attribute or JavaScript property. type: number.

ItemValue
JavaScript propertythickness
HTML attributethickness
Typenumber
Default1

marker

Allowed values: none, circle, square, triangle, cross, diamond, star. Default: 'none'.

ItemValue
JavaScript propertymarker
HTML attributemarker
TypeLineChartMarker
Default'none'
Allowed valuesnone, circle, square, triangle, cross, diamond, star

markerSize

Set as an HTML attribute or JavaScript property. type: number.

ItemValue
JavaScript propertymarkerSize
HTML attributemarker-size
Typenumber
Default4

markerFilter

Pass as a JavaScript property. type: LineChartMarkerFilter.

ItemValue
JavaScript propertymarkerFilter
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeLineChartMarkerFilter
Defaultundefined

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

markerClickable

Set as an HTML attribute or JavaScript property. type: boolean.

ItemValue
JavaScript propertymarkerClickable
HTML attributemarker-clickable
Typeboolean
Defaulttrue

markerActiveTrigger

Allowed values: hover, click, custom. Default: 'hover'.

ItemValue
JavaScript propertymarkerActiveTrigger
HTML attributemarker-active-trigger
TypeLineChartMarkerActiveTrigger
Default'hover'
Allowed valueshover, click, custom

seriesActiveTrigger

Allowed values: hover, click, custom. Default: undefined.

ItemValue
JavaScript propertyseriesActiveTrigger
HTML attributeseries-active-trigger
TypeLineChartMarkerActiveTrigger
Defaultundefined
Allowed valueshover, click, custom

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

lineDash

Pass as a JavaScript property. type: number[].

ItemValue
JavaScript propertylineDash
HTML attributePass objects, arrays, and callbacks as JavaScript properties
Typenumber[]
Default[]

connectNulls

Set as an HTML attribute or JavaScript property. type: boolean.

ItemValue
JavaScript propertyconnectNulls
HTML attributeconnect-nulls
Typeboolean
Defaultfalse

smooth

Allowed values: none, monotone, cardinal. Default: 'none'.

ItemValue
JavaScript propertysmooth
HTML attributesmooth
TypeLineChartSmooth
Default'none'
Allowed valuesnone, monotone, cardinal

smoothTension

Set as an HTML attribute or JavaScript property. type: number.

ItemValue
JavaScript propertysmoothTension
HTML attributesmooth-tension
Typenumber
Default0.5

step

Allowed values: none, left, right, center. Default: 'none'.

ItemValue
JavaScript propertystep
HTML attributestep
TypeLineChartStep
Default'none'
Allowed valuesnone, left, right, center

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.

ItemValue
JavaScript propertybaseline
HTML attributebaseline
Typenumber
Default0

engine

Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.

ItemValue
JavaScript propertyengine
HTML attributeengine
TypeLineChartEngineMode
Default'auto'
Allowed valuesauto, standard, pro

proThreshold

Set as an HTML attribute or JavaScript property. type: number.

ItemValue
JavaScript propertyproThreshold
HTML attributepro-threshold
Typenumber
Default100_000

unavailable

Allowed values: fallback, error. Default: 'fallback'.

ItemValue
JavaScript propertyunavailable
HTML attributeunavailable
TypeLineChartUnavailableBehaviour
Default'fallback'
Allowed valuesfallback, error

streamSource

A stream source for live data. Check the contract for the specific type.

ItemValue
JavaScript propertystreamSource
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeLineChartStreamSource
Defaultundefined

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

streamWindow

The streaming data range to keep visible.

ItemValue
JavaScript propertystreamWindow
HTML attributestream-window
Typenumber
Defaultundefined

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.

ItemValue
JavaScript propertystreamMax
HTML attributestream-max
Typenumber
Defaultundefined

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

ItemValue
JavaScript propertyframeBudget
HTML attributeframe-budget
Typenumber
Defaultundefined

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.

ItemValue
JavaScript propertystreamWindowMs
HTML attributestream-window-ms
Typenumber
Defaultundefined

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

ItemValue
JavaScript propertystreamTimestamps
HTML attributestream-timestamps
Type'on' | 'off'
Defaultundefined
Allowed valuesoff, 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.

ItemValue
JavaScript propertyanimated
HTML attributeanimate
Typeboolean
Defaultfalse

animationDuration

Animation duration in milliseconds.

ItemValue
JavaScript propertyanimationDuration
HTML attributeanimation-duration
Typenumber
Default200

animationEasing

Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.

ItemValue
JavaScript propertyanimationEasing
HTML attributeanimation-easing
TypeLineChartEasing
Default'ease-out'
Allowed valueslinear, ease-out, ease-in, ease-in-out

animationType

Allowed values: initial, update. Default: undefined.

ItemValue
JavaScript propertyanimationType
HTML attributeanimation-type
TypeLineChartAnimationType
Defaultundefined
Allowed valuesinitial, update

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

legend

Whether to show a legend for series or items.

ItemValue
JavaScript propertylegend
HTML attributelegend
Typeboolean
Defaultfalse

legendPosition

Where the legend is positioned.

ItemValue
JavaScript propertylegendPosition
HTML attributelegend-position
TypeLineChartLegendPosition
Default'bottom'
Allowed valuestop, bottom, left, right, float

legendItems

Pass as a JavaScript property. type: LegendItem[].

ItemValue
JavaScript propertylegendItems
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeLegendItem[]
Defaultundefined

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

seriesName

Set as an HTML attribute or JavaScript property. type: string.

ItemValue
JavaScript propertyseriesName
HTML attributeseries-name
Typestring
Defaultundefined

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

ItemValue
JavaScript propertylegendFloatAlign
HTML attributelegend-float-align
Type'start' | 'center' | 'end'
Default'end'
Allowed valuesstart, center, end

legendFloatVerticalAlign

Allowed values: top, bottom, middle. Default: 'top'.

ItemValue
JavaScript propertylegendFloatVerticalAlign
HTML attributelegend-float-vertical-align
Type'top' | 'middle' | 'bottom'
Default'top'
Allowed valuestop, bottom, middle

legendDraggable

Set as an HTML attribute or JavaScript property. type: boolean.

ItemValue
JavaScript propertylegendDraggable
HTML attributelegend-draggable
Typeboolean
Defaultfalse

xAxis

Match category axis categories to the values order.

ItemValue
JavaScript propertyxAxis
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeCartesianAxisInput | ReadonlyArray<CartesianAxisInput>
Defaultundefined
Literals in the typeauto, off

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

yAxis

Use consistent units and ranges for values being compared.

ItemValue
JavaScript propertyyAxis
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeCartesianYAxisInput
Defaultundefined
Literals in the typeauto, off

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

chartTitle

The title inside the chart. Explain the data's unit and meaning alongside it.

ItemValue
JavaScript propertychartTitle
HTML attributechart-title
Typestring
Defaultundefined

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.

ItemValue
JavaScript propertychartSubtitle
HTML attributechart-subtitle
Typestring
Defaultundefined

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.

ItemValue
JavaScript propertytooltip
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeCartesianTooltipInput
Defaultundefined
Literals in the typeauto, off

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

crosshair

Pass as a JavaScript property. type: CartesianCrosshairInput.

ItemValue
JavaScript propertycrosshair
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeCartesianCrosshairInput
Defaultundefined

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

gridLines

Allowed values: auto, off. Default: undefined.

ItemValue
JavaScript propertygridLines
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeCartesianGridLinesInput
Defaultundefined
Literals in the typeauto, off

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

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.

ItemValue
JavaScript propertyzoom
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeCartesianZoomInput
Defaultundefined
Literals in the typeauto, 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.

brush

brush selection: 'rect' | true | { type, mode, modifier, minSizePx, keyboard, clearOnClick }; off by default.

ItemValue
JavaScript propertybrush
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeCartesianBrushInput
Defaultundefined
Literals in the typeauto, 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.

drawings

the drawing document: a list of drawings, a serialized envelope, or a JSON string of either (replaces the document; the history restarts).

ItemValue
JavaScript propertydrawings
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeChartDrawingsInput
Defaultundefined

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

drawingMode

the pointer disposition: 'none' (default), 'draw' (the plain drag places drawingTool; precedence drawing > brush > zoom > pan), 'select' ().

ItemValue
JavaScript propertydrawingMode
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeDrawingModeInput
Defaultundefined
Literals in the typenone, 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.

drawingTool

the tool drawingMode="draw" places (a registered tool name; default 'segment').

ItemValue
JavaScript propertydrawingTool
HTML attributedrawing-tool
Typestring
Defaultundefined

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

ItemValue
JavaScript propertydrawingSpace
HTML attributedrawing-space
TypeDrawingSpace
Defaultundefined
Allowed valuesdata, pixel

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

visualMap

a visual map binding (a sy-visual-map snapshot + the data dimension): every mark is coloured through it.

ItemValue
JavaScript propertyvisualMap
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeVisualMapBinding | null
Defaultundefined

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

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

javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // LineChartRenderResult & { tier: LineChartEngineTier; budget?: LineChartFrameBudgetInfo; stream?: LineChartStreamFrameInfo }
});

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

javascript
chart.addEventListener('frameBudgetReport', event => {
  console.log(event.detail); // LineChartFrameBudgetEventDetail
});

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

javascript
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 }>.

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

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

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

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

javascript
chart.addEventListener('pointHover', event => {
  console.log(event.detail); // LineChartPointEventDetail | null
});

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

javascript
chart.addEventListener('pointClick', event => {
  console.log(event.detail); // LineChartPointEventDetail
});

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

javascript
chart.addEventListener('pointContextMenu', event => {
  console.log(event.detail); // ChartPointContextMenuEventDetail<LineChartPointEventDetail>
});

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

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

javascript
chart.addEventListener('seriesOutsideClick', event => {
  console.log(event.detail); // CartesianSeriesOutsideClickEventDetail
});

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

javascript
chart.addEventListener('legendItemClick', event => {
  console.log(event.detail); // LineChartLegendItemEventDetail
});

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

javascript
chart.addEventListener('seriesToggled', event => {
  console.log(event.detail); // LineChartSeriesToggledEventDetail
});

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

javascript
chart.addEventListener('crosshairMove', event => {
  console.log(event.detail); // CartesianCrosshairEventDetail | null
});

tooltipShow

Whether to display the built-in tooltip.

Event name: tooltipShow. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianTooltipEventDetail>.

javascript
chart.addEventListener('tooltipShow', event => {
  console.log(event.detail); // CartesianTooltipEventDetail
});

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

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

javascript
chart.addEventListener('tooltipAction', event => {
  console.log(event.detail); // CartesianTooltipActionEventDetail
});

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

javascript
chart.addEventListener('zoomChange', event => {
  console.log(event.detail); // CartesianZoomChangeEventDetail
});

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

javascript
chart.addEventListener('brushChange', event => {
  console.log(event.detail); // CartesianBrushChangeEventDetail
});

brushStart

a brush drag opened up (once per gesture).

Event name: brushStart. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianBrushStartEventDetail>.

javascript
chart.addEventListener('brushStart', event => {
  console.log(event.detail); // CartesianBrushStartEventDetail
});

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

javascript
chart.addEventListener('brushMove', event => {
  console.log(event.detail); // CartesianBrushMoveEventDetail
});

brushEnd

the drag released (after brushChange), or was cancelled.

Event name: brushEnd. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianBrushEndEventDetail>.

javascript
chart.addEventListener('brushEnd', event => {
  console.log(event.detail); // CartesianBrushEndEventDetail
});

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

javascript
chart.addEventListener('drawingsChange', event => {
  console.log(event.detail); // DrawingsChangeEventDetail
});

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

javascript
chart.addEventListener('drawingSelectionChange', event => {
  console.log(event.detail); // DrawingSelectionChangeEventDetail
});

Methods

appendPoint

Append one value to the stream. Check the argument type and the licensing requirements for streaming.

typescript
appendPoint(value: number): Promise<void>
ArgumentsTypeRequired
valuenumberRequired

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.

typescript
appendBatch(values: ReadonlyArray<number> | Float32Array): Promise<void>
ArgumentsTypeRequired
valuesReadonlyArray<number> | Float32ArrayRequired

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

typescript
shift(count: number): Promise<void>
ArgumentsTypeRequired
countnumberRequired

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

typescript
replace(values: ReadonlyArray<number> | Float32Array): Promise<void>
ArgumentsTypeRequired
valuesReadonlyArray<number> | Float32ArrayRequired

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.

typescript
getStreamSource(): Promise<LineChartStreamSource | undefined>

Return type: Promise<LineChartStreamSource | undefined>. Call the method after element registration and await its Promise result.

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.

typescript
getEngineStatus(): Promise<ChartEngineStatus>

Return type: Promise<ChartEngineStatus>. Call the method after element registration and await its Promise result.

setAnimation

An asynchronous method. Check the argument and return types below.

typescript
setAnimation(options: { duration?: number; easing?: LineChartEasing; enabled?: boolean; type?: LineChartAnimationType }): Promise<void>
ArgumentsTypeRequired
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.

pauseAnimation

Pause the current animation.

typescript
pauseAnimation(): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

resumeAnimation

Resume a paused animation.

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

typescript
showTooltipAtPoint(pointIndex: number): Promise<CartesianTooltipEventDetail | null>
ArgumentsTypeRequired
pointIndexnumberRequired

Return type: Promise<CartesianTooltipEventDetail | null>. Call the method after element registration and await its Promise result.

hideTooltip

Close the currently visible tooltip.

typescript
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).

typescript
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>
ArgumentsTypeRequired
requestCartesianZoomRequestRequired

Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.

zoomBy

scale the current windows by factor (< 1 zooms in) around anchorFraction (0..1, default centre).

typescript
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>
ArgumentsTypeRequired
factornumberRequired
anchorFractionnumberOptional

Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.

panBy

slide the zoomed windows by data units ({ x?, y? }); a no-op at the full extent.

typescript
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>
ArgumentsTypeRequired
delta{ x?: number; y?: number }Required

Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.

resetZoom

Reset the zoomed or panned range to the original data range.

typescript
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>

Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.

getZoom

Read the current zoom range. Check the return type's nullability and the range for each axis.

typescript
getZoom(): Promise<CartesianZoomState | null>

Return type: Promise<CartesianZoomState | null>. Call the method after element registration and await its Promise result.

getZoomExtent

the full extent (and key) of the primary — or the named — master axes (null before the first layout).

typescript
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>
ArgumentsTypeRequired
requestCartesianZoomExtentRequestOptional

Return type: Promise<CartesianZoomExtentDetail | null>. Call the method after element registration and await its Promise result.

showCrosshairAt

show the crosshair at a data position (a linked chart's cursor) without emitting crosshairMove; false when it falls outside the plot.

typescript
showCrosshairAt(request: CartesianCrosshairShowRequest): Promise<boolean>
ArgumentsTypeRequired
requestCartesianCrosshairShowRequestRequired

Return type: Promise<boolean>. Call the method after element registration and await its Promise result.

hideCrosshair

hide the crosshair shown by showCrosshairAt (or the pointer's).

typescript
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).

typescript
getDrawings(): Promise<ChartDrawing[]>

Return type: Promise<ChartDrawing[]>. Call the method after element registration and await its Promise result.

setDrawings

replace the document from script (null clears); the history keeps the previous document as an undo step.

typescript
setDrawings(drawings: ReadonlyArray<ChartDrawingInput> | null): Promise<DrawingsChangeEventDetail | null>
ArgumentsTypeRequired
drawingsReadonlyArray<ChartDrawingInput> | nullRequired

Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.

addDrawing

add one drawing (an explicit id replaces); answers the resolved drawing, or null when the input was malformed.

typescript
addDrawing(drawing: ChartDrawingInput): Promise<ChartDrawing | null>
ArgumentsTypeRequired
drawingChartDrawingInputRequired

Return type: Promise<ChartDrawing | null>. Call the method after element registration and await its Promise result.

updateDrawing

merge a patch into one drawing (anchors, style, visible, locked, options, meta).

typescript
updateDrawing(id: string, patch: Partial<Omit<ChartDrawing, 'id'>>): Promise<ChartDrawing | null>
ArgumentsTypeRequired
idstringRequired
patchPartial<Omit<ChartDrawing, 'id'>>Required

Return type: Promise<ChartDrawing | null>. Call the method after element registration and await its Promise result.

removeDrawing

remove one drawing.

typescript
removeDrawing(id: string): Promise<boolean>
ArgumentsTypeRequired
idstringRequired

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.

typescript
removeDrawings(ids: ReadonlyArray<string>): Promise<DrawingsChangeEventDetail | null>
ArgumentsTypeRequired
idsReadonlyArray<string>Required

Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.

setDrawingSpace

move a drawing to the other coordinate space at the current frame (its anchors convert, nothing moves on screen); one undoable step.

typescript
setDrawingSpace(id: string, space: DrawingSpace): Promise<ChartDrawing | null>
ArgumentsTypeRequired
idstringRequired
spaceDrawingSpaceRequired

Return type: Promise<ChartDrawing | null>. Call the method after element registration and await its Promise result.

clearDrawings

clear the document (undoable).

typescript
clearDrawings(): Promise<DrawingsChangeEventDetail | null>

Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.

undoDrawing

undo the last document change; null when there is nothing to undo.

typescript
undoDrawing(): Promise<DrawingsChangeEventDetail | null>

Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.

redoDrawing

redo the last undone change; null when there is nothing to redo.

typescript
redoDrawing(): Promise<DrawingsChangeEventDetail | null>

Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.

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.

typescript
getDrawingLayer(): Promise<DrawingLayerSnapshot | null>

Return type: Promise<DrawingLayerSnapshot | null>. Call the method after element registration and await its Promise result.

exportDrawings

the document as its versioned JSON envelope (feed it back through drawings or importDrawings).

typescript
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).

typescript
importDrawings(input: ChartDrawingsInput): Promise<DrawingsChangeEventDetail | null>
ArgumentsTypeRequired
inputChartDrawingsInputRequired

Return type: Promise<DrawingsChangeEventDetail | null>. Call the method after element registration and await its Promise result.

selectDrawings

select drawings from script (null / [] clears); unknown ids are dropped.

typescript
selectDrawings(ids: ReadonlyArray<string> | null): Promise<DrawingSelectionChangeEventDetail | null>
ArgumentsTypeRequired
idsReadonlyArray<string> | nullRequired

Return type: Promise<DrawingSelectionChangeEventDetail | null>. Call the method after element registration and await its Promise result.

getDrawingSelection

the selected drawing ids.

typescript
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'.

typescript
setBrush(areas: ReadonlyArray<CartesianBrushAreaInput> | null): Promise<CartesianBrushChangeEventDetail | null>
ArgumentsTypeRequired
areasReadonlyArray<CartesianBrushAreaInput> | nullRequired

Return type: Promise<CartesianBrushChangeEventDetail | null>. Call the method after element registration and await its Promise result.

clearBrush

clear the brush areas (brushChange with source 'clear').

typescript
clearBrush(): Promise<CartesianBrushChangeEventDetail | null>

Return type: Promise<CartesianBrushChangeEventDetail | null>. Call the method after element registration and await its Promise result.

getBrush

the persisted brush areas (primary data space).

typescript
getBrush(): Promise<CartesianBrushArea[]>

Return type: Promise<CartesianBrushArea[]>. Call the method after element registration and await its Promise result.

getBrushSelection

the points inside the brush areas, against the current layout.

typescript
getBrushSelection(): Promise<CartesianBrushSelectedSeries[]>

Return type: Promise<CartesianBrushSelectedSeries[]>. Call the method after element registration and await its Promise result.

setVisualMap

Bind (or clear) a visual map: every mark is coloured through it on the next paint.

typescript
setVisualMap(binding: VisualMapBinding | null): Promise<VisualMapBinding | null>
ArgumentsTypeRequired
bindingVisualMapBinding | nullRequired

Return type: Promise<VisualMapBinding | null>. Call the method after element registration and await its Promise result.

getVisualMap

An asynchronous method. Check the argument and return types below.

typescript
getVisualMap(): Promise<VisualMapBinding | null>

Return type: Promise<VisualMapBinding | null>. Call the method after element registration and await its Promise result.

getVisualExtent

The extent of a dimension over the visible points — what a bound sy-visual-map adopts as its domain.

typescript
getVisualExtent(request?: VisualMapExtentRequest): Promise<VisualMapExtent | null>
ArgumentsTypeRequired
requestVisualMapExtentRequestOptional

Return type: Promise<VisualMapExtent | null>. Call the method after element registration and await its Promise result.

hitTestMarker

An asynchronous method. Check the argument and return types below.

typescript
hitTestMarker(clientX: number, clientY: number): Promise<LineChartPointEventDetail | null>
ArgumentsTypeRequired
clientXnumberRequired
clientYnumberRequired

Return type: Promise<LineChartPointEventDetail | null>. Call the method after element registration and await its Promise result.

hitTestMarkers

An asynchronous method. Check the argument and return types below.

typescript
hitTestMarkers(clientX: number, clientY: number): Promise<LineChartPointEventDetail[]>
ArgumentsTypeRequired
clientXnumberRequired
clientYnumberRequired

Return type: Promise<LineChartPointEventDetail[]>. Call the method after element registration and await its Promise result.

redraw

Redraw the chart using its current data and options. Inspect the rendered result after the returned Promise resolves.

typescript
redraw(): Promise<LineChartRenderResult>

Return type: Promise<LineChartRenderResult>. Call the method after element registration and await its Promise result.

getActiveTier

An asynchronous method. Check the argument and return types below.

typescript
getActiveTier(): Promise<LineChartEngineTier>

Return type: Promise<LineChartEngineTier>. Call the method after element registration and await its Promise result.

addSeries

An asynchronous method. Check the argument and return types below.

typescript
addSeries(options: LineChartSeries, opts?: { redraw?: boolean; insertAt?: number }): Promise<number>
ArgumentsTypeRequired
optionsLineChartSeriesRequired
opts{ redraw?: boolean; insertAt?: number }Optional

Return type: Promise<number>. Call the method after element registration and await its Promise result.

removeSeries

An asynchronous method. Check the argument and return types below.

typescript
removeSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>
ArgumentsTypeRequired
idOrIndexstring | numberRequired
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.

typescript
updateSeries(idOrIndex: string | number, patch: Partial<LineChartSeries>, opts?: { redraw?: boolean }): Promise<boolean>
ArgumentsTypeRequired
idOrIndexstring | numberRequired
patchPartial<LineChartSeries>Required
opts{ redraw?: boolean }Optional

Return type: Promise<boolean>. Call the method after element registration and await its Promise result.

setSeriesData

An asynchronous method. Check the argument and return types below.

typescript
setSeriesData(idOrIndex: string | number, data: LineChartValues, opts?: { redraw?: boolean }): Promise<boolean>
ArgumentsTypeRequired
idOrIndexstring | numberRequired
dataLineChartValuesRequired
opts{ redraw?: boolean }Optional

Return type: Promise<boolean>. Call the method after element registration and await its Promise result.

addPoint

An asynchronous method. Check the argument and return types below.

typescript
addPoint(idOrIndex: string | number, point: number, opts?: { shift?: boolean; redraw?: boolean }): Promise<boolean>
ArgumentsTypeRequired
idOrIndexstring | numberRequired
pointnumberRequired
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.

typescript
showSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>
ArgumentsTypeRequired
idOrIndexstring | numberRequired
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.

typescript
hideSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>
ArgumentsTypeRequired
idOrIndexstring | numberRequired
opts{ redraw?: boolean }Optional

Return type: Promise<boolean>. Call the method after element registration and await its Promise result.