sy-area-chart

Area

Show trends and magnitude with filled areas.

sy-area-chart

Use for traffic, revenue, and other measures whose magnitude changes over time.

Overlapping areas may hide series behind them. Provide tooltips and a data table for precise comparisons.

Base chart tier: Community. Features such as additional renderers and custom branding have separate entitlement requirements.

InputData description
seriesEach series contains values in chronological order.
xAxisProvide categories with the same length as the series.
yAxisThe value axis that defines the area's baseline.

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-area-chart.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-area-chart",
      "props": {
        "engine": "standard",
        "series": [
          {
            "name": "Online",
            "values": [24, 29, 27, 38, 43, 40],
            "color": "#8263d9"
          },
          {
            "name": "Store",
            "values": [15, 19, 17, 24, 22, 29],
            "color": "#239c91"
          }
        ],
        "xAxis": {
          "kind": "category",
          "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
        },
        "yAxis": {
          "kind": "linear",
          "min": 0
        },
        "legend": true,
        "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', 'area 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

Each series contains values in chronological order.

ItemValue
JavaScript propertyseries
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeAreaChartSeries[]
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: AreaChartSeriesStateOptions.

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

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

seriesActiveTrigger

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

ItemValue
JavaScript propertyseriesActiveTrigger
HTML attributeseries-active-trigger
TypeAreaChartSeriesActiveTrigger
Default'hover'
Allowed valueshover, click, custom

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

fillColor

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

ItemValue
JavaScript propertyfillColor
HTML attributefill-color
Typestring
Defaultundefined

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

fillOpacity

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

ItemValue
JavaScript propertyfillOpacity
HTML attributefill-opacity
Typenumber
Defaultundefined

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

fillGradient

Pass as a JavaScript property. type: AreaChartFillGradient.

ItemValue
JavaScript propertyfillGradient
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeAreaChartFillGradient
Defaultundefined

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

fillPattern

Pass as a JavaScript property. type: AreaChartFillPattern.

ItemValue
JavaScript propertyfillPattern
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeAreaChartFillPattern
Defaultundefined

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

patternKind

Allowed values: dots, diagonal, cross-hatch, diagonal-forward, diagonal-backward, fill. Default: undefined.

ItemValue
JavaScript propertypatternKind
HTML attributepattern-kind
TypeAreaChartPatternKind
Defaultundefined
Allowed valuesdots, diagonal, cross-hatch, diagonal-forward, diagonal-backward, fill

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

patternColor

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

ItemValue
JavaScript propertypatternColor
HTML attributepattern-color
Typestring
Defaultundefined

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

patternBackground

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

ItemValue
JavaScript propertypatternBackground
HTML attributepattern-background
Typestring
Defaultundefined

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

patternSize

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

ItemValue
JavaScript propertypatternSize
HTML attributepattern-size
Typenumber
Defaultundefined

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

patternThickness

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

ItemValue
JavaScript propertypatternThickness
HTML attributepattern-thickness
Typenumber
Defaultundefined

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

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.

baseline

Value the area is anchored to (line at yScale(baseline)). Always explicit (default 0) so the rendered start point is never ambiguous.

ItemValue
JavaScript propertybaseline
HTML attributebaseline
Typenumber
Default0

connectNulls

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

ItemValue
JavaScript propertyconnectNulls
HTML attributeconnect-nulls
Typeboolean
Defaultfalse

engine

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

ItemValue
JavaScript propertyengine
HTML attributeengine
TypeAreaChartEngineMode
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
TypeAreaChartUnavailableBehaviour
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
TypeAreaChartStreamSource
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.

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
TypeAreaChartEasing
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
TypeAreaChartAnimationType
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
TypeAreaChartLegendPosition
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

Provide categories with the same length as the series.

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

The value axis that defines the area's baseline.

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<AreaChartRenderResult & { tier: AreaChartEngineTier }>.

javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // AreaChartRenderResult & { tier: AreaChartEngineTier }
});

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
});

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
});

pointHover

CustomEvent.detail type: CartesianPointEventDetail | null. Event names are case-sensitive.

Event name: pointHover. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianPointEventDetail | null>.

javascript
chart.addEventListener('pointHover', event => {
  console.log(event.detail); // CartesianPointEventDetail | 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<CartesianPointEventDetail>.

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

pointContextMenu

CustomEvent.detail type: ChartPointContextMenuEventDetail<CartesianPointEventDetail>. Event names are case-sensitive.

Event name: pointContextMenu. Names are case-sensitive. Read the payload from detail on CustomEvent<ChartPointContextMenuEventDetail<CartesianPointEventDetail>>.

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

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: AreaChartLegendItemEventDetail. Event names are case-sensitive.

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

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

seriesToggled

CustomEvent.detail type: AreaChartSeriesToggledEventDetail. Event names are case-sensitive.

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

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

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 (Chart Pro): like the stream methods it waits for a license still being confirmed.

typescript
getStreamSource(): Promise<AreaChartStreamSource | undefined>

Return type: Promise<AreaChartStreamSource | 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?: AreaChartEasing; enabled?: boolean; type?: AreaChartAnimationType }): Promise<void>
ArgumentsTypeRequired
options{ duration?: number; easing?: AreaChartEasing; enabled?: boolean; type?: AreaChartAnimationType }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.

redraw

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

typescript
redraw(): Promise<AreaChartRenderResult>

Return type: Promise<AreaChartRenderResult>. 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<AreaChartEngineTier>

Return type: Promise<AreaChartEngineTier>. 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: AreaChartSeries, opts?: { redraw?: boolean; insertAt?: number }): Promise<number>
ArgumentsTypeRequired
optionsAreaChartSeriesRequired
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<AreaChartSeries>, opts?: { redraw?: boolean }): Promise<boolean>
ArgumentsTypeRequired
idOrIndexstring | numberRequired
patchPartial<AreaChartSeries>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: AreaChartValues, opts?: { redraw?: boolean }): Promise<boolean>
ArgumentsTypeRequired
idOrIndexstring | numberRequired
dataAreaChartValuesRequired
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.