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.

Feature examples

Try 34 interactive feature examples and inspect their code. Select “Edit in preview” to combine more options in the settings panel above.