3D Scatter.

PRO

Show three continuous measurements as points in space.

<sy-scatter-3d>Installation and integration API reference

LIVE EXAMPLE

3D observations

Match the page theme

Interact with the chart to see selection and range-change results here.

OptionsChanges are reflected in the preview and code.

Appearance and style4

OpacityMarkerMarker radiusSphere detail

Legend and interaction13

Animation duration (ms)Animation easingAnimation triggerTooltip modeTooltip triggerSimultaneous tooltipsCrosshair direction

Title and dimensions3

Chart titleChart subtitleChart height (px)

Show three continuous measurements as points in space. All values are sample data.

View code

Current preview

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

Usage and data

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.

Data contract

Property	Input format
`data`	An array of { x, y, z, value?, label? }.
`marker`	sphere or cube.

Updating data

Assign a new array or object to the property instead of mutating values inside an array. Chart events provide selection results through event.detail. When disposing of the view, clean up ResizeObserver and event listeners registered by your app.

Add to your interface

The code tabs below the preview contain the full data, options, event bindings, and responsive sizing for the current example. Copy them into an app project, such as Vite, that can resolve the installed packages.

Shared sy-chart API versus direct tags

API reference

The full public API for sy-scatter-3d. Pass objects and arrays as JavaScript properties. Select a name to view usage code and type definitions.

Key properties

Attribute / Property	Type / Default	Description
	`Scatter3DData`Default: undefined	An array of { x, y, z, value?, label? }.
	`number`Default: 800	Chart width in pixels. Update with ResizeObserver when the container changes.
	`number`Default: 480	Chart height in pixels.
brandLogo	`string`Default: undefined	The default is the Syidax logo. With the Pro chart.branding entitlement, use none or a PNG, JPEG, or WebP data URL.
brandPosition	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`Default: 'bottom-right'	The corner where the logo is anchored. Applies equally to Community and Pro, on screen and in image exports.
	`number`Default: 1	Set as an HTML attribute or JavaScript property. type: number.
	`boolean`Default: false	Whether to show a legend for series or items.
	`'sphere'\|'cube'`Default: 'sphere'	sphere or cube.
markerRadius	`number`Default: .06	Set as an HTML attribute or JavaScript property. type: number.
markerDetail	`0\|1\|2`Default: 1	Set as an HTML attribute or JavaScript property. type: 0\|1\|2.
chartTitle	`string`Default: undefined	The title inside the chart. Explain the data's unit and meaning alongside it.
chartSubtitle	`string`Default: undefined	The subtitle inside the chart.
	`CartesianTooltipInput`Default: undefined	Tooltip settings for pointer-driven values, position, and content.
tooltipEnabled	`boolean`Default: true	Set as an HTML attribute or JavaScript property. type: boolean.
	`CartesianCrosshairInput`Default: undefined	Pass as a JavaScript property. type: CartesianCrosshairInput.
animated	`boolean`Default: false	Whether to animate initial display and data changes.
animationDuration	`number`Default: 600	Animation duration in milliseconds.
animationEasing	`Scatter3DEasing`Default: 'ease-out'	Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
animationType	`HeatmapAnimationType`Default: undefined	Allowed values: initial, update. Default: undefined.

Other properties 19

Attribute / Property	Type / Default	Description
	`HeatmapColorInput`Default: 'viridis'	Pass as a JavaScript property. type: HeatmapColorInput.
colorDomain	`Scatter3DDomain`Default: undefined	Pass as a JavaScript property. type: Scatter3DDomain.
missingColor	`string`Default: '#94a3b8'	Set as an HTML attribute or JavaScript property. type: string.
scatterSize	`Scene3DVector`Default: [2,2,2]	Pass as a JavaScript property. type: Scene3DVector.
	`string`Default: 'en-US'	Set as an HTML attribute or JavaScript property. type: string.
	`Scatter3DAxesOptions\|boolean\|string`Default: undefined	Pass as a JavaScript property. type: Scatter3DAxesOptions\|boolean\|string.
	`Scene3DMaterialOptions`Default: undefined	Pass as a JavaScript property. type: Scene3DMaterialOptions.
	`Scene3DLightingOptions`Default: undefined	Pass as a JavaScript property. type: Scene3DLightingOptions.
	`Scene3DCameraOptions\|string`Default: undefined	Pass as a JavaScript property. type: Scene3DCameraOptions\|string.
	`Orbit3DOptions\|boolean\|string`Default: undefined	Pass as a JavaScript property. type: Orbit3DOptions\|boolean\|string.
showEmpty	`boolean`Default: true	Whether the component shows its own empty-geometry notice.
activeColor	`string`Default: '#f59e0b'	Set as an HTML attribute or JavaScript property. type: string.
enableMouseTracking	`boolean`Default: true	Set as an HTML attribute or JavaScript property. type: boolean.
tooltipFormat	`(detail:Scatter3DHitDetail)=>string`Default: undefined	Pass as a JavaScript property. type: (detail:Scatter3DHitDetail)=>string.
crosshairSnapDistance	`number`Default: 12	Set as an HTML attribute or JavaScript property. type: number.
streamSource	`Scatter3DStreamSource`Default: undefined	A stream source for live data. Check the contract for the specific type.
streamMax	`number`Default: undefined	The maximum number of streaming data points to retain.
	`Scatter3DEngineMode`Default: 'auto'	Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
	`Scatter3DUnavailableBehaviour`Default: 'fallback'	Allowed values: fallback, error. Default: 'fallback'.

Events 16

Events	Detail type	Description
	`Scatter3DRenderResult&{tier:Scatter3DEngineTier}`	Emits rendering results in detail when chart drawing completes.
	`Scatter3DHitDetail`	A point selection event. Read the selected data and index from CustomEvent.detail.
	`Scatter3DHitDetail\|null`	CustomEvent.detail type: Scatter3DHitDetail\|null. Event names are case-sensitive.
	`Scatter3DSelectionChangeEventDetail`	CustomEvent.detail type: Scatter3DSelectionChangeEventDetail. Event names are case-sensitive.
	`ChartPointContextMenuEventDetail<Scatter3DHitDetail>`	CustomEvent.detail type: ChartPointContextMenuEventDetail<Scatter3DHitDetail>. Event names are case-sensitive.
	`Scatter3DCameraChangeEventDetail`	CustomEvent.detail type: Scatter3DCameraChangeEventDetail. Event names are case-sensitive.
	`Scatter3DCrosshairDetail\|null`	CustomEvent.detail type: Scatter3DCrosshairDetail\|null. Event names are case-sensitive.
	`{count:number;replaced:number}`	CustomEvent.detail type: {count:number;replaced:number}. Event names are case-sensitive.
	`{dropped:number}`	CustomEvent.detail type: {dropped:number}. Event names are case-sensitive.
	`CartesianTooltipEventDetail`	Whether to display the built-in tooltip.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`CartesianTooltipActionEventDetail`	CustomEvent.detail type: CartesianTooltipActionEventDetail. Event names are case-sensitive.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`void`	CustomEvent.detail type: void. Event names are case-sensitive.
	`{message:string}`	CustomEvent.detail type: {message:string}. Event names are case-sensitive.

Methods 44

Stencil methods return Promises. Use await within an async function to read the result.

Method / Arguments	Return type	Description
point: Scatter3DDatum	`Promise<void>`	An asynchronous method. Check the argument and return types below.
points: ReadonlyArray<Scatter3DDatum>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
points: ReadonlyArray<Scatter3DDatum>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
count: number	`Promise<void>`	An asynchronous method. Check the argument and return types below.
count: number	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
points: ReadonlyArray<Scatter3DDatum>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<Scatter3DStreamSource\|undefined>`	An asynchronous method. Check the argument and return types below.
data: Scatter3DData	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<Scatter3DDatum[]>`	An asynchronous method. Check the argument and return types below.
	`Promise<{ points: number; validPoints: number; missingCoordinates: number; invalidCoordinates: number; missingValues: number; }>`	An asynchronous method. Check the argument and return types below.
	`Promise<Scatter3DGeometry>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
options: {enabled?:boolean;duration?:number;easing?:Scatter3DEasing;type?:HeatmapAnimationType}	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<Scene3DCameraOptions>`	An asynchronous method. Check the argument and return types below.
options: Scene3DCameraOptions	`Promise<void>`	An asynchronous method. Check the argument and return types below.
projection: Scene3DProjection	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
padding?: number	`Promise<void>`	An asynchronous method. Check the argument and return types below.
factor: number	`Promise<void>`	A factor below one moves closer. Perspective changes distance; orthographic changes zoom.
azimuth: number, polar?: number	`Promise<void>`	An asynchronous method. Check the argument and return types below.
x: number, y: number	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<Scatter3DRenderResult>`	An asynchronous method. Check the argument and return types below.
	`Promise<Scatter3DEngineTier>`	An asynchronous method. Check the argument and return types below.
	`Promise<string\|undefined>`	An asynchronous method. Check the argument and return types below.
	`Promise<ChartEngineStatus>`	Requested engine vs what runs, and why (CHART-ADD-08); a frozen or unlicensed chart reports the license outcome.
	`Promise<void>`	Without the grant (or while frozen) nothing is recycled: no GPU work starts.
cssX: number, cssY: number	`Promise<Scatter3DHitDetail\|null>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<Scatter3DHitDetail\|null>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<Scatter3DSelection>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<CartesianTooltipEventDetail\|null>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<CartesianTooltipEventDetail\|null>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
request: CartesianCrosshairShowRequest&{dataZ?:number}	`Promise<boolean>`	Quiet source-coordinate synchronization. A cloud has no interpolated surface between its points.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<ChartDataTable>`	An asynchronous method. Check the argument and return types below.
options?: CsvOptions	`Promise<string>`	An asynchronous method. Check the argument and return types below.
	`Promise<string>`	An asynchronous method. Check the argument and return types below.