sy-scatter-3d

Scatter 3d

Show three continuous measurements as points in space.

sy-scatter-3d

Explore clusters and outliers in multivariate observations.

Rotate the view to inspect points that overlap in a 2D projection. State the unit for each axis.

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

InputData description
dataAn array of { x, y, z, value?, label? }.
markersphere or cube.

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-scatter-3d.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-scatter-3d",
      "props": {
        "data": [
          {
            "id": "p0",
            "label": "Measurement 1",
            "x": 0,
            "y": 0,
            "z": 1,
            "value": 0,
            "color": "#8263d9"
          },
          {
            "id": "p1",
            "label": "Measurement 2",
            "x": 1,
            "y": 0,
            "z": 8,
            "value": 1,
            "color": "#8263d9"
          },
          {
            "id": "p2",
            "label": "Measurement 3",
            "x": 2,
            "y": 0,
            "z": 6,
            "value": 2,
            "color": "#8263d9"
          },
          {
            "id": "p3",
            "label": "Measurement 4",
            "x": 3,
            "y": 0,
            "z": 4,
            "value": 3,
            "color": "#8263d9"
          },
          {
            "id": "p4",
            "label": "Measurement 5",
            "x": 4,
            "y": 0,
            "z": 2,
            "value": 4,
            "color": "#8263d9"
          },
          {
            "id": "p5",
            "label": "Measurement 6",
            "x": 5,
            "y": 0,
            "z": 9,
            "value": 5,
            "color": "#8263d9"
          },
          {
            "id": "p6",
            "label": "Measurement 7",
            "x": 0,
            "y": 1,
            "z": 7,
            "value": 6,
            "color": "#8263d9"
          },
          {
            "id": "p7",
            "label": "Measurement 8",
            "x": 1,
            "y": 1,
            "z": 5,
            "value": 7,
            "color": "#8263d9"
          },
          {
            "id": "p8",
            "label": "Measurement 9",
            "x": 2,
            "y": 1,
            "z": 3,
            "value": 8,
            "color": "#239c91"
          },
          {
            "id": "p9",
            "label": "Measurement 10",
            "x": 3,
            "y": 1,
            "z": 1,
            "value": 9,
            "color": "#239c91"
          },
          {
            "id": "p10",
            "label": "Measurement 11",
            "x": 4,
            "y": 1,
            "z": 8,
            "value": 10,
            "color": "#239c91"
          },
          {
            "id": "p11",
            "label": "Measurement 12",
            "x": 5,
            "y": 1,
            "z": 6,
            "value": 11,
            "color": "#239c91"
          },
          {
            "id": "p12",
            "label": "Measurement 13",
            "x": 0,
            "y": 2,
            "z": 4,
            "value": 12,
            "color": "#239c91"
          },
          {
            "id": "p13",
            "label": "Measurement 14",
            "x": 1,
            "y": 2,
            "z": 2,
            "value": 13,
            "color": "#239c91"
          },
          {
            "id": "p14",
            "label": "Measurement 15",
            "x": 2,
            "y": 2,
            "z": 9,
            "value": 14,
            "color": "#239c91"
          },
          {
            "id": "p15",
            "label": "Measurement 16",
            "x": 3,
            "y": 2,
            "z": 7,
            "value": 15,
            "color": "#239c91"
          },
          {
            "id": "p16",
            "label": "Measurement 17",
            "x": 4,
            "y": 2,
            "z": 5,
            "value": 16,
            "color": "#e99954"
          },
          {
            "id": "p17",
            "label": "Measurement 18",
            "x": 5,
            "y": 2,
            "z": 3,
            "value": 17,
            "color": "#e99954"
          },
          {
            "id": "p18",
            "label": "Measurement 19",
            "x": 0,
            "y": 3,
            "z": 1,
            "value": 18,
            "color": "#e99954"
          },
          {
            "id": "p19",
            "label": "Measurement 20",
            "x": 1,
            "y": 3,
            "z": 8,
            "value": 19,
            "color": "#e99954"
          },
          {
            "id": "p20",
            "label": "Measurement 21",
            "x": 2,
            "y": 3,
            "z": 6,
            "value": 20,
            "color": "#e99954"
          },
          {
            "id": "p21",
            "label": "Measurement 22",
            "x": 3,
            "y": 3,
            "z": 4,
            "value": 21,
            "color": "#e99954"
          },
          {
            "id": "p22",
            "label": "Measurement 23",
            "x": 4,
            "y": 3,
            "z": 2,
            "value": 22,
            "color": "#e99954"
          },
          {
            "id": "p23",
            "label": "Measurement 24",
            "x": 5,
            "y": 3,
            "z": 9,
            "value": 23,
            "color": "#e99954"
          }
        ],
        "marker": "sphere",
        "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', 'scatter-3d 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

An array of { x, y, z, value?, label? }.

ItemValue
JavaScript propertydata
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeScatter3DData
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
Default800

height

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

ItemValue
JavaScript propertyheight
HTML attributeheight
Typenumber
Default480

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

colors

Pass as a JavaScript property. type: HeatmapColorInput.

ItemValue
JavaScript propertycolors
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeHeatmapColorInput
Default'viridis'

colorDomain

Pass as a JavaScript property. type: Scatter3DDomain.

ItemValue
JavaScript propertycolorDomain
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeScatter3DDomain
Defaultundefined

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

missingColor

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

ItemValue
JavaScript propertymissingColor
HTML attributemissing-color
Typestring
Default'#94a3b8'

scatterSize

Pass as a JavaScript property. type: Scene3DVector.

ItemValue
JavaScript propertyscatterSize
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeScene3DVector
Default[2,2,2]

opacity

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

ItemValue
JavaScript propertyopacity
HTML attributeopacity
Typenumber
Default1

legend

Whether to show a legend for series or items.

ItemValue
JavaScript propertylegend
HTML attributelegend
Typeboolean
Defaultfalse

locale

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

ItemValue
JavaScript propertylocale
HTML attributelocale
Typestring
Default'en-US'

axes

Pass as a JavaScript property. type: Scatter3DAxesOptions|boolean|string.

ItemValue
JavaScript propertyaxes
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeScatter3DAxesOptions|boolean|string
Defaultundefined

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

marker

sphere or cube.

ItemValue
JavaScript propertymarker
HTML attributemarker
Type'sphere'|'cube'
Default'sphere'
Allowed valuessphere, cube

markerRadius

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

ItemValue
JavaScript propertymarkerRadius
HTML attributemarker-radius
Typenumber
Default.06

markerDetail

Set as an HTML attribute or JavaScript property. type: 0|1|2.

ItemValue
JavaScript propertymarkerDetail
HTML attributemarker-detail
Type0|1|2
Default1

material

Pass as a JavaScript property. type: Scene3DMaterialOptions.

ItemValue
JavaScript propertymaterial
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeScene3DMaterialOptions
Defaultundefined

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

lighting

Pass as a JavaScript property. type: Scene3DLightingOptions.

ItemValue
JavaScript propertylighting
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeScene3DLightingOptions
Defaultundefined

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

camera

Pass as a JavaScript property. type: Scene3DCameraOptions|string.

ItemValue
JavaScript propertycamera
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeScene3DCameraOptions|string
Defaultundefined

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

orbit

Pass as a JavaScript property. type: Orbit3DOptions|boolean|string.

ItemValue
JavaScript propertyorbit
HTML attributePass objects, arrays, and callbacks as JavaScript properties
TypeOrbit3DOptions|boolean|string
Defaultundefined

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

showEmpty

Whether the component shows its own empty-geometry notice.

ItemValue
JavaScript propertyshowEmpty
HTML attributeshow-empty
Typeboolean
Defaulttrue

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.

activeColor

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

ItemValue
JavaScript propertyactiveColor
HTML attributeactive-color
Typestring
Default'#f59e0b'

enableMouseTracking

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

ItemValue
JavaScript propertyenableMouseTracking
HTML attributeenable-mouse-tracking
Typeboolean
Defaulttrue

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.

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:Scatter3DHitDetail)=>string.

ItemValue
JavaScript propertytooltipFormat
HTML attributePass objects, arrays, and callbacks as JavaScript properties
Type(detail:Scatter3DHitDetail)=>string
Defaultundefined

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.

crosshairSnapDistance

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

ItemValue
JavaScript propertycrosshairSnapDistance
HTML attributecrosshair-snap-distance
Typenumber
Default12

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
TypeScatter3DEasing
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
TypeHeatmapAnimationType
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

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

engine

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

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

unavailable

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

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

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<Scatter3DRenderResult&{tier:Scatter3DEngineTier}>.

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

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

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

pointHover

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

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

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

selectionChanged

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

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

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

pointContextMenu

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

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

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

cameraChange

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

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

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

crosshairMove

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

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

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

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

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

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

dataValidationError

CustomEvent.detail type: {message:string}. Event names are case-sensitive.

Event name: dataValidationError. Names are case-sensitive. Read the payload from detail on CustomEvent<{message:string}>.

javascript
chart.addEventListener('dataValidationError', event => {
  console.log(event.detail); // {message:string}
});

Methods

appendPoint

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

typescript
appendPoint(point: Scatter3DDatum): Promise<void>
ArgumentsTypeRequired
pointScatter3DDatumRequired

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

appendPoints

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

typescript
appendPoints(points: ReadonlyArray<Scatter3DDatum>): Promise<void>
ArgumentsTypeRequired
pointsReadonlyArray<Scatter3DDatum>Required

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

appendBatch

Append multiple values to the stream. Check the argument type and the licensing requirements for streaming.

typescript
appendBatch(points: ReadonlyArray<Scatter3DDatum>): Promise<void>
ArgumentsTypeRequired
pointsReadonlyArray<Scatter3DDatum>Required

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

shiftPoints

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

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

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.

clearStream

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

typescript
clearStream(): Promise<void>

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(points: ReadonlyArray<Scatter3DDatum>): Promise<void>
ArgumentsTypeRequired
pointsReadonlyArray<Scatter3DDatum>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<Scatter3DStreamSource|undefined>

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

setData

Replace the bar set.

typescript
setData(data: Scatter3DData): Promise<void>
ArgumentsTypeRequired
dataScatter3DDataRequired

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

getData

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

typescript
getData(): Promise<Scatter3DDatum[]>

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

getDiagnostics

Normalization diagnostics for the effective base and stream source.

typescript
getDiagnostics(): Promise<{ points: number; validPoints: number; missingCoordinates: number; invalidCoordinates: number; missingValues: number; }>

Return type: Promise<{ points: number; validPoints: number; missingCoordinates: number; invalidCoordinates: number; missingValues: number; }>. Call the method after element registration and await its Promise result.

getLayout

Host-local geometry as shown. Scale fields preserve ellipses under non-uniform viewport zoom.

typescript
getLayout(): Promise<Scatter3DGeometry>

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

setAnimation

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

typescript
setAnimation(options: {enabled?:boolean;duration?:number;easing?:Scatter3DEasing;type?:HeatmapAnimationType}): Promise<void>
ArgumentsTypeRequired
options{enabled?:boolean;duration?:number;easing?:Scatter3DEasing;type?:HeatmapAnimationType}Required

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.

getCamera

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

typescript
getCamera(): Promise<Scene3DCameraOptions>

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

setCamera

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

typescript
setCamera(options: Scene3DCameraOptions): Promise<void>
ArgumentsTypeRequired
optionsScene3DCameraOptionsRequired

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

setProjection

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

typescript
setProjection(projection: Scene3DProjection): Promise<void>
ArgumentsTypeRequired
projectionScene3DProjectionRequired

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

resetCamera

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

typescript
resetCamera(): Promise<void>

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

saveCamera

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

typescript
saveCamera(): Promise<void>

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

fitPoints

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

typescript
fitPoints(padding?: number): Promise<void>
ArgumentsTypeRequired
paddingnumberOptional

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

zoomBy

A factor below one moves closer. Perspective changes distance; orthographic changes zoom.

typescript
zoomBy(factor: number): Promise<void>
ArgumentsTypeRequired
factornumberRequired

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

rotateBy

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

typescript
rotateBy(azimuth: number, polar?: number): Promise<void>
ArgumentsTypeRequired
azimuthnumberRequired
polarnumberOptional

Return type: Promise<void>. 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(x: number, y: number): Promise<void>
ArgumentsTypeRequired
xnumberRequired
ynumberRequired

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

Return type: Promise<void>. 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<Scatter3DRenderResult>

Return type: Promise<Scatter3DRenderResult>. 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<Scatter3DEngineTier>

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

getEngineStatus

Requested engine vs what runs, and why (CHART-ADD-08); a frozen or unlicensed chart reports the license outcome.

typescript
getEngineStatus(): Promise<ChartEngineStatus>

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

recycleGpu

Without the grant (or while frozen) nothing is recycled: no GPU work starts.

typescript
recycleGpu(): Promise<void>

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

hitTest

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

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

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

selectPointAt

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

typescript
selectPointAt(index: number): Promise<Scatter3DHitDetail|null>
ArgumentsTypeRequired
indexnumberRequired

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

clearSelection

Release the selection (emits selectionChanged when there was one).

typescript
clearSelection(): Promise<void>

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

getSelection

The selection: the selected node's / link's detail (null = none); its anchors are Pro-derived, refused without a valid license.

typescript
getSelection(): Promise<Scatter3DSelection>

Return type: Promise<Scatter3DSelection>. 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(index: number): Promise<CartesianTooltipEventDetail|null>
ArgumentsTypeRequired
indexnumberRequired

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

showTooltipAtIndex

open the tooltip on a box (the facade's showTooltipAtPoint routes here); null off the boxes 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.

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(index: number): Promise<boolean>
ArgumentsTypeRequired
indexnumberRequired

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

showCrosshairAtData

Quiet source-coordinate synchronization. A cloud has no interpolated surface between its points.

typescript
showCrosshairAtData(request: CartesianCrosshairShowRequest&{dataZ?:number}): Promise<boolean>
ArgumentsTypeRequired
requestCartesianCrosshairShowRequest&{dataZ?:number}Required

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.

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.

getCSV

The tape as a CSV table (ISO time, OHLC, volume).

typescript
getCSV(options?: CsvOptions): Promise<string>
ArgumentsTypeRequired
optionsCsvOptionsOptional

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

getTable

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

typescript
getTable(): Promise<string>

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