Scatter.

COMMUNITY

Show relationships between two continuous variables as individual points.

<sy-scatter-chart>Installation and integration API reference

LIVE EXAMPLE

Two measurements

Match the page theme

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

Explore the relationship between X and Y as individual points. 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/components/sy-scatter-chart.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-scatter-chart",
      "props": {
        "engine": "standard",
        "values": [
          {
            "x": 0,
            "y": 7
          },
          {
            "x": 16,
            "y": 4
          },
          {
            "x": 29,
            "y": -3
          },
          {
            "x": 37,
            "y": -7
          },
          {
            "x": 44,
            "y": -5
          },
          {
            "x": 55,
            "y": 2
          },
          {
            "x": -1,
            "y": 17
          },
          {
            "x": 15,
            "y": 15
          },
          {
            "x": 29,
            "y": 9
          },
          {
            "x": 38,
            "y": 4
          },
          {
            "x": 45,
            "y": 4
          },
          {
            "x": 55,
            "y": 10
          },
          {
            "x": -3,
            "y": 26
          },
          {
            "x": 14,
            "y": 26
          },
          {
            "x": 29,
            "y": 21
          },
          {
            "x": 39,
            "y": 15
          },
          {
            "x": 47,
            "y": 13
          },
          {
            "x": 55,
            "y": 18
          },
          {
            "x": -4,
            "y": 35
          },
          {
            "x": 13,
            "y": 37
          },
          {
            "x": 29,
            "y": 33
          },
          {
            "x": 40,
            "y": 26
          },
          {
            "x": 48,
            "y": 23
          },
          {
            "x": 56,
            "y": 26
          },
          {
            "x": -5,
            "y": 43
          },
          {
            "x": 11,
            "y": 47
          },
          {
            "x": 28,
            "y": 45
          },
          {
            "x": 41,
            "y": 38
          },
          {
            "x": 49,
            "y": 33
          },
          {
            "x": 57,
            "y": 35
          },
          {
            "x": -5,
            "y": 51
          },
          {
            "x": 10,
            "y": 56
          },
          {
            "x": 27,
            "y": 56
          },
          {
            "x": 41,
            "y": 50
          },
          {
            "x": 51,
            "y": 44
          },
          {
            "x": 58,
            "y": 44
          }
        ],
        "markerSize": 5,
        "xAxis": {
          "kind": "linear"
        },
        "yAxis": {
          "kind": "linear"
        },
        "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 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 correlation, clusters, and outliers. Use series to distinguish observation groups.

A visible relationship does not establish causation. Adjust marker size or sample count to inspect overlapping points.

Data contract

Property	Input format
`values`	An array of [x, y] or { x, y }.
`series`	Set values, name, and color for each group.
`xAxis`	Use a linear axis for continuous coordinates.

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-chart. Pass objects and arrays as JavaScript properties. Select a name to view usage code and type definitions.

Key properties

Attribute / Property	Type / Default	Description
	`ScatterChartSeries[]`Default: undefined	Set values, name, and color for each group.
	`ScatterChartValues`Default: []	An array of [x, y] or { x, y }.
	`number`Default: 600	Chart width in pixels. Update with ResizeObserver when the container changes.
	`number`Default: 360	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.
markerSize	`number`Default: 4	Set as an HTML attribute or JavaScript property. type: number.
markerLineWidth	`number`Default: 0	Set as an HTML attribute or JavaScript property. type: number.
inactiveOtherPoints	`boolean`Default: false	Set as an HTML attribute or JavaScript property. type: boolean.
inactivePointOpacity	`number`Default: 0.2	Set as an HTML attribute or JavaScript property. type: number.
animated	`boolean`Default: false	Whether to animate initial display and data changes.
animationDuration	`number`Default: 400	Animation duration in milliseconds.
animationEasing	`ScatterChartEasing`Default: 'ease-out'	Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
animationType	`ScatterChartAnimationType`Default: undefined	Allowed values: initial, update. Default: undefined.
	`boolean`Default: false	Whether to show a legend for series or items.
legendPosition	`ScatterChartLegendPosition`Default: 'bottom'	Where the legend is positioned.
xAxis	`CartesianAxisInput \| ReadonlyArray<CartesianAxisInput>`Default: undefined	Use a linear axis for continuous coordinates.
yAxis	`CartesianYAxisInput`Default: undefined	Allowed values: auto, off. Default: undefined.
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.
	`CartesianCrosshairInput`Default: undefined	Pass as a JavaScript property. type: CartesianCrosshairInput.
gridLines	`CartesianGridLinesInput`Default: undefined	Allowed values: auto, off. Default: undefined.
	`CartesianZoomInput`Default: undefined	Settings for zooming and the visible range.

Other properties 22

Attribute / Property	Type / Default	Description
activeSeriesIndex	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
seriesState	`ScatterChartSeriesStateOptions`Default: undefined	Pass as a JavaScript property. type: ScatterChartSeriesStateOptions.
seriesActiveTrigger	`ScatterChartSeriesActiveTrigger`Default: 'hover'	Allowed values: hover, click, custom. Default: 'hover'.
	`string`Default: '#2563eb'	Set as an HTML attribute or JavaScript property. type: string.
	`ScatterChartMarkerSymbol`Default: 'circle'	Allowed values: circle, square, triangle, cross, diamond, star, triangle-down, wye. Default: 'circle'.
hitTolerance	`number`Default: 8	Set as an HTML attribute or JavaScript property. type: number.
	`ScatterChartEngineMode`Default: 'auto'	Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
proThreshold	`number`Default: 50_000	Set as an HTML attribute or JavaScript property. type: number.
	`ScatterChartUnavailableBehaviour`Default: 'fallback'	Allowed values: fallback, error. Default: 'fallback'.
streamSource	`ScatterChartStreamSource`Default: undefined	A stream source for live data. Check the contract for the specific type.
streamWindow	`number`Default: undefined	The streaming data range to keep visible.
streamMax	`number`Default: undefined	The maximum number of streaming data points to retain.
legendItems	`LegendItem[]`Default: undefined	Pass as a JavaScript property. type: LegendItem[].
seriesName	`string`Default: undefined	Set as an HTML attribute or JavaScript property. type: string.
	`CartesianBrushInput`Default: undefined	Allowed values: auto, off, true, false, rect, lasso. Default: undefined.
	`ChartDrawingsInput`Default: undefined	Pass as a JavaScript property. type: ChartDrawingsInput.
drawingMode	`DrawingModeInput`Default: undefined	Allowed values: none, off, true, false, draw, select. Default: undefined.
drawingTool	`string`Default: undefined	Set as an HTML attribute or JavaScript property. type: string.
drawingSpace	`DrawingSpace`Default: undefined	Allowed values: data, pixel. Default: undefined.
	`number \| boolean`Default: undefined	Pass as a JavaScript property. type: number \| boolean.
progressiveThreshold	`number`Default: 20000	Set as an HTML attribute or JavaScript property. type: number.
visualMap	`VisualMapBinding \| null`Default: undefined	Pass as a JavaScript property. type: VisualMapBinding \| null.

Events 24

Events	Detail type	Description
	`ScatterChartRenderResult & { tier: ScatterChartEngineTier }`	Emits rendering results in detail when chart drawing completes.
	`{ count: number }`	CustomEvent.detail type: { count: number }. Event names are case-sensitive.
	`{ dropped: number }`	CustomEvent.detail type: { dropped: number }. 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.
	`CartesianCrosshairEventDetail \| null`	CustomEvent.detail type: CartesianCrosshairEventDetail \| null. 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.
	`CartesianZoomChangeEventDetail`	CustomEvent.detail type: CartesianZoomChangeEventDetail. Event names are case-sensitive.
	`CartesianBrushChangeEventDetail`	CustomEvent.detail type: CartesianBrushChangeEventDetail. Event names are case-sensitive.
	`CartesianBrushStartEventDetail`	CustomEvent.detail type: CartesianBrushStartEventDetail. Event names are case-sensitive.
	`CartesianBrushMoveEventDetail`	CustomEvent.detail type: CartesianBrushMoveEventDetail. Event names are case-sensitive.
	`CartesianBrushEndEventDetail`	CustomEvent.detail type: CartesianBrushEndEventDetail. Event names are case-sensitive.
	`DrawingsChangeEventDetail`	CustomEvent.detail type: DrawingsChangeEventDetail. Event names are case-sensitive.
	`DrawingSelectionChangeEventDetail`	CustomEvent.detail type: DrawingSelectionChangeEventDetail. Event names are case-sensitive.
	`{ drawn: number; total: number; done: boolean }`	CustomEvent.detail type: { drawn: number; total: number; done: boolean }. Event names are case-sensitive.
	`CartesianPointEventDetail \| null`	CustomEvent.detail type: CartesianPointEventDetail \| null. Event names are case-sensitive.
	`CartesianPointEventDetail`	A point selection event. Read the selected data and index from CustomEvent.detail.
	`ChartPointContextMenuEventDetail<CartesianPointEventDetail>`	CustomEvent.detail type: ChartPointContextMenuEventDetail<CartesianPointEventDetail>. Event names are case-sensitive.
	`CartesianSeriesOutsideClickEventDetail`	CustomEvent.detail type: CartesianSeriesOutsideClickEventDetail. Event names are case-sensitive.
	`ScatterChartLegendItemEventDetail`	CustomEvent.detail type: ScatterChartLegendItemEventDetail. Event names are case-sensitive.
	`ScatterChartSeriesToggledEventDetail`	CustomEvent.detail type: ScatterChartSeriesToggledEventDetail. Event names are case-sensitive.

Methods 51

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

Method / Arguments	Return type	Description
	`Promise<ScatterChartRenderResult>`	An asynchronous method. Check the argument and return types below.
	`Promise<ScatterChartEngineTier>`	An asynchronous method. Check the argument and return types below.
options: ScatterChartSeries, opts?: { redraw?: boolean; insertAt?: number }	`Promise<number>`	An asynchronous method. Check the argument and return types below.
idOrIndex: string \| number, opts?: { redraw?: boolean }	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
idOrIndex: string \| number, patch: Partial<ScatterChartSeries>, opts?: { redraw?: boolean }	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
idOrIndex: string \| number, data: ScatterChartValues, opts?: { redraw?: boolean }	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
idOrIndex: string \| number, point: number \| readonly [number, number] \| { x?: number; y: number }, opts?: { shift?: boolean; redraw?: boolean }	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
id: string \| number, opts?: { redraw?: boolean }	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
id: string \| number, opts?: { redraw?: boolean }	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
point: ScatterChartDatum	`Promise<void>`	An asynchronous method. Check the argument and return types below.
idOrIndex: string \| number, points: ReadonlyArray<unknown>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
idOrIndex: string \| number, count?: number	`Promise<void>`	An asynchronous method. Check the argument and return types below.
idOrIndex: string \| number, points: ReadonlyArray<unknown>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<ScatterChartStreamSource \| undefined>`	An asynchronous method. Check the argument and return types below.
	`Promise<ChartEngineStatus>`	The requested engine, the engine that draws and why (ROADMAP-loading §5.3). A Chart Pro license decision names `chart.webgpu` and its state; renderer causes (not in this build, no WebGPU, a failed GPU) stay apart.
options: { duration?: number; easing?: ScatterChartEasing; enabled?: boolean; type?: ScatterChartAnimationType }	`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.
cssX: number, cssY: number	`Promise<{ pointIndex: number; seriesIndex: number } \| null>`	An asynchronous method. Check the argument and return types below.
pointIndex: number, seriesIndex?: 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.
request: CartesianZoomRequest	`Promise<CartesianZoomChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
factor: number, anchorFraction?: number	`Promise<CartesianZoomChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
delta: { x?: number; y?: number }	`Promise<CartesianZoomChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<CartesianZoomChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<CartesianZoomState \| null>`	An asynchronous method. Check the argument and return types below.
request?: CartesianZoomExtentRequest	`Promise<CartesianZoomExtentDetail \| null>`	An asynchronous method. Check the argument and return types below.
request: CartesianCrosshairShowRequest	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<ChartDrawing[]>`	An asynchronous method. Check the argument and return types below.
drawings: ReadonlyArray<ChartDrawingInput> \| null	`Promise<DrawingsChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
drawing: ChartDrawingInput	`Promise<ChartDrawing \| null>`	An asynchronous method. Check the argument and return types below.
id: string, patch: Partial<Omit<ChartDrawing, 'id'>>	`Promise<ChartDrawing \| null>`	An asynchronous method. Check the argument and return types below.
id: string	`Promise<boolean>`	An asynchronous method. Check the argument and return types below.
ids: ReadonlyArray<string>	`Promise<DrawingsChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
id: string, space: DrawingSpace	`Promise<ChartDrawing \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<DrawingsChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<DrawingsChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<DrawingsChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<DrawingLayerSnapshot \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<string>`	An asynchronous method. Check the argument and return types below.
input: ChartDrawingsInput	`Promise<DrawingsChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
ids: ReadonlyArray<string> \| null	`Promise<DrawingSelectionChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<string[]>`	An asynchronous method. Check the argument and return types below.
areas: ReadonlyArray<CartesianBrushAreaInput> \| null	`Promise<CartesianBrushChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<CartesianBrushChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<CartesianBrushArea[]>`	An asynchronous method. Check the argument and return types below.
	`Promise<CartesianBrushSelectedSeries[]>`	An asynchronous method. Check the argument and return types below.
binding: VisualMapBinding \| null	`Promise<VisualMapBinding \| null>`	Bind (or clear) a visual map: every mark is coloured through it on the next paint.
	`Promise<VisualMapBinding \| null>`	An asynchronous method. Check the argument and return types below.
request?: VisualMapExtentRequest	`Promise<VisualMapExtent \| null>`	The extent of a dimension over the visible points — what a bound `sy-visual-map` adopts as its domain.

Scatter.

Two measurements

Usage and data

Data contract

Updating data

Feature examples

Marker size and outline

Highlight points on hover

Right-side legend

Inspect values with the pointer

Crosshair tracking

Drag to zoom and pan

Replay animation

Animation

Axis

Crosshair

Engine Compare

Legend

Marker

Null Values

Large datasets

Highlight state

Series

Size

Symbols

Tooltip

Data input

Visual Map

Zoom and pan

Context menu

Data context menu

Read coordinates and data

Runtime API

Overview

Streaming · Live updatesPRO

Streaming · Add batchesPRO

Streaming · Add and update live dataPRO

Add to your interface

API reference

Key properties