sy-error-bar-chart

Error Bar

Show uncertainty or a range around a central value.

sy-error-bar-chart

Represent means with confidence intervals, tolerances, or measurement ranges.

Error bars do not determine their own meaning. Explain whether they represent standard deviation, a confidence interval, or another range.

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

InputData description
dataUse { category, value, low, high } or a symmetric error.

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-pro/components/sy-error-bar-chart.js';
  define0();

  // Pro: complete registerLicense at app startup using your issued certificate.
  // The website preview certificate is not for use in customer apps.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-error-bar-chart",
      "props": {
        "data": [
          {
            "category": "A",
            "value": 40,
            "low": 32,
            "high": 48
          },
          {
            "category": "B",
            "value": 55,
            "low": 50,
            "high": 63
          },
          {
            "category": "C",
            "value": 47,
            "low": 38,
            "high": 54
          }
        ],
        "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', 'error-bar 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

data

Use { category, value, low, high } or a symmetric error.

ItemValue
JavaScript propertydata
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeErrorBarData
Defaultundefined

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

width

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

ItemValue
JavaScript propertywidth
HTML attributewidth
Typenumber
Default900

height

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

ItemValue
JavaScript propertyheight
HTML attributeheight
Typenumber
Default360

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

xAxis

Configure the horizontal axis type, categories, range, and formatting. For a category axis, match the categories order to the value array indices. Charts supporting multiple axes can accept an axis array.

ItemValue
JavaScript propertyxAxis
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeXAxisInput
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

Configure the vertical axis range, ticks, labels, and direction. Use consistent units for comparisons, and consider a zero baseline when comparing bar lengths.

ItemValue
JavaScript propertyyAxis
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeYAxisInput
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.

gridLines

Grid lines: the value axis's on by default, the category axis's off.

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.

crosshair

Crosshair that follows the cursor across the plot.

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.

zoom

Zoom: 'x' | 'y' | 'xy' | true (x) enable the drag rectangle, the pan (Shift + drag, the arrows), Ctrl + wheel, the pinch and the keyboard (+ / - / Escape) on the primary axes; an object refines them (mode / drag / pan / wheel / pinch / keyboard / minRangePx / resetButton / inside). Off by default; zoomTo / zoomBy / panBy / 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.

yMin

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

ItemValue
JavaScript propertyyMin
HTML attributey-min
Typenumber
Defaultundefined

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

yMax

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

ItemValue
JavaScript propertyyMax
HTML attributey-max
Typenumber
Defaultundefined

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

padding

The automatic domain pads the span over the bounds by this share (default 5 %); bar mode joins zero.

ItemValue
JavaScript propertypadding
HTML attributepadding
Typenumber
Default0.05

color

The marker / column colour, the whisker + cap colour, the hovered / focused point.

ItemValue
JavaScript propertycolor
HTML attributecolor
Typestring
DefaultDEFAULT_FILL_COLOR

errorColor

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

ItemValue
JavaScript propertyerrorColor
HTML attributeerror-color
Typestring
DefaultDEFAULT_ERROR_COLOR

activeColor

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

ItemValue
JavaScript propertyactiveColor
HTML attributeactive-color
Typestring
DefaultDEFAULT_ACTIVE_COLOR

showBars

Bar mode: a column from zero to the value instead of a marker (the domain joins zero).

ItemValue
JavaScript propertyshowBars
HTML attributeshow-bars
Typeboolean
Defaultfalse

barWidth

The column's share of the slot pitch (0.6), clamped between bar-min-px and bar-max-px.

ItemValue
JavaScript propertybarWidth
HTML attributebar-width
Typenumber
DefaultERROR_BAR_DEFAULT_BAR_RATIO

barMinPx

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

ItemValue
JavaScript propertybarMinPx
HTML attributebar-min-px
Typenumber
DefaultERROR_BAR_DEFAULT_MIN_PX

barMaxPx

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

ItemValue
JavaScript propertybarMaxPx
HTML attributebar-max-px
Typenumber
DefaultERROR_BAR_DEFAULT_MAX_PX

capWidth

The caps' share of the slot pitch (0.3; clamped 4 … 40 px; 0 hides them), their switch.

ItemValue
JavaScript propertycapWidth
HTML attributecap-width
Typenumber
DefaultERROR_BAR_DEFAULT_CAP_RATIO

showCaps

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

ItemValue
JavaScript propertyshowCaps
HTML attributeshow-caps
Typeboolean
Defaulttrue

markerSize

The marker's size and the whisker's thickness in CSS px.

ItemValue
JavaScript propertymarkerSize
HTML attributemarker-size
Typenumber
DefaultERROR_BAR_DEFAULT_MARKER_PX

whiskerWidth

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

ItemValue
JavaScript propertywhiskerWidth
HTML attributewhisker-width
Typenumber
DefaultERROR_BAR_DEFAULT_WHISKER_PX

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.

enableMouseTracking

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

ItemValue
JavaScript propertyenableMouseTracking
HTML attributeenable-mouse-tracking
Typeboolean
Defaulttrue

tooltip

The point tooltip (the shared cartesian tooltip input: trigger, format, html, connector …), its switch, a formatter of the default text.

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.

tooltipEnabled

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

ItemValue
JavaScript propertytooltipEnabled
HTML attributetooltip-show
Typeboolean
Defaulttrue

tooltipFormat

Pass as a JavaScript property. type: (detail: ErrorBarPointEventDetail) => string.

ItemValue
JavaScript propertytooltipFormat
HTML attributePass objects, arrays, and callbacks as JavaScript properties
Type(detail: ErrorBarPointEventDetail) => string
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
Default600

animationEasing

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

ItemValue
JavaScript propertyanimationEasing
HTML attributeanimation-easing
TypeErrorBarEasing
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
TypeErrorBarAnimationType
Defaultundefined
Allowed valuesinitial, update

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

streamSource

§3.6: an external stream source (category upserts); without one the chart keeps its own on the first push.

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

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

streamMax

Points tracked by the internal stream at most (the oldest leave as windowSlid).

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.

streamWindow

The newest N streamed items the chart renders (the whole buffer when unset): the N categories pushed most recently keep their points, older streamed categories revert to their data point or leave.

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.

engine

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

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

unavailable

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

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

Events

rendered

Every drawn frame; engine is the engine status (requested / effective / code / the governing license feature).

Event name: rendered. Names are case-sensitive. Read the payload from detail on CustomEvent<ErrorBarRenderResult & { tier: ErrorBarEngineTier; engine?: ChartEngineStatus }>.

javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // ErrorBarRenderResult & { tier: ErrorBarEngineTier; engine?: ChartEngineStatus }
});

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

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

pointHover

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

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

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

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

zoomChange

Fired after every zoom change (drag / pan / wheel / pinch / 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
});

pointContextMenu

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

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

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

appended

CustomEvent.detail type: { count: number; replaced: number }. Event names are case-sensitive.

Event name: appended. Names are case-sensitive. Read the payload from detail on CustomEvent<{ count: number; replaced: number }>.

javascript
chart.addEventListener('appended', event => {
  console.log(event.detail); // { count: number; replaced: 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 }
});

tooltipShow

The shared tooltip events (the controller emits them).

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

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

Methods

getDataTable

Current normalized table, including the retained stream; independent of GPU availability.

typescript
getDataTable(): Promise<ChartDataTable>

Return type: Promise<ChartDataTable>. 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<ErrorBarRenderResult>

Return type: Promise<ErrorBarRenderResult>. 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<ErrorBarEngineTier>

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

getUnavailableReason

Why the WebGPU renderer could not run (the fallback notice's reason); undefined when nothing fell back.

typescript
getUnavailableReason(): Promise<string | undefined>

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

setData

Replace the bar set.

typescript
setData(data: ErrorBarData): Promise<void>
ArgumentsTypeRequired
dataErrorBarDataRequired

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

appendPoint

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

typescript
appendPoint(datum: ErrorBarDatumInput): Promise<void>
ArgumentsTypeRequired
datumErrorBarDatumInputRequired

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(data: ReadonlyArray<ErrorBarDatumInput>): Promise<void>
ArgumentsTypeRequired
dataReadonlyArray<ErrorBarDatumInput>Required

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

shift

Drop the oldest streamed points (the data points 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(data: ReadonlyArray<ErrorBarDatumInput>): Promise<void>
ArgumentsTypeRequired
dataReadonlyArray<ErrorBarDatumInput>Required

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<ErrorBarStreamSource | undefined>

Return type: Promise<ErrorBarStreamSource | undefined>. 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?: ErrorBarEasing; enabled?: boolean; type?: ErrorBarAnimationType }): Promise<void>
ArgumentsTypeRequired
options{ duration?: number; easing?: ErrorBarEasing; enabled?: boolean; type?: ErrorBarAnimationType }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.

replayAnimation

Replay the initial sweep from min → value(s). No-op when animation is off / reduced.

typescript
replayAnimation(): Promise<void>

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

hitTest

The point under a host-local CSS point (the nearest slot, within half a pitch), or null.

typescript
hitTest(cssX: number, cssY: number): Promise<ErrorBarPointEventDetail | null>
ArgumentsTypeRequired
cssXnumberRequired
cssYnumberRequired

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

getPoint

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

typescript
getPoint(index: number): Promise<ErrorBarPoint | null>
ArgumentsTypeRequired
indexnumberRequired

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

getPointByCategory

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

typescript
getPointByCategory(category: string): Promise<ErrorBarPoint | null>
ArgumentsTypeRequired
categorystringRequired

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

getPointCount

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

typescript
getPointCount(): Promise<number>

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

getPoints

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

typescript
getPoints(): Promise<ErrorBarPoint[]>

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

getCategories

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

typescript
getCategories(): Promise<string[]>

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

getExtent

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

typescript
getExtent(): Promise<ErrorBarExtent>

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

getDomain

The data domain the grid spans.

typescript
getDomain(): Promise<ErrorBarDomain>

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

showTooltipAtIndex

Open the tooltip on a point (the facade's showTooltipAtPoint routes here); null off the points or with the tooltip off.

typescript
showTooltipAtIndex(index: number): Promise<CartesianTooltipEventDetail | null>
ArgumentsTypeRequired
indexnumberRequired

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.

focusPointAt

Move the keyboard focus ring to a point (null off the points); emits pointHover like the walk.

typescript
focusPointAt(index: number): Promise<ErrorBarPointEventDetail | null>
ArgumentsTypeRequired
indexnumberRequired

Return type: Promise<ErrorBarPointEventDetail | null>. 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 — 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.

getEngineStatus

Requested engine vs what runs, and why (CHART-ADD-08): the decision for the current inputs, read without side effects (ProChartLicense.engineStatus); a renderer that failed at run time reports engine-unsupported.

typescript
getEngineStatus(): Promise<ChartEngineStatus>

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