Scatter
Compare two measures as points across categories.
Chart ID: scatter. Independent import: @revolist/charts/scatter.
Live example
Section titled “Live example”Loading chart…
Reading the chart
Section titled “Reading the chart”Compare two numeric measures by their X and Y positions. Each point keeps a category identity; a category label does not determine its horizontal position.
Data requirements
Section titled “Data requirements”Bind numeric X and Y series explicitly. Bubble marks also require a non-negative size series. Channels reference stable series IDs, not labels. Parallel channel arrays can describe independent scatter/bubble groups.
The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.
| Data role | Field count |
|---|---|
category | 1 or more |
x | 1 or more |
y | 1 or more |
Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.
Create this chart
Section titled “Create this chart”Install the package using the installation guide, give the host an explicit height, and call createScatterChart after the host mounts. This factory fixes the chart type to scatter.
<div id="chart" style="width: 100%; height: 450px;"></div>Complete runnable TypeScript example with sample data
import { createScatterChart } from '@revolist/charts/scatter';
const container = document.getElementById('chart')!;const chart = await createScatterChart({ container, "dataset": { "revision": 0, "source": "client", "categories": [ { "id": "preview-category-0", "label": "Alpha", "path": [ "Alpha" ], "labels": [ "Alpha" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-1", "label": "Beta", "path": [ "Beta" ], "labels": [ "Beta" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-2", "label": "Gamma", "path": [ "Gamma" ], "labels": [ "Gamma" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-3", "label": "Delta", "path": [ "Delta" ], "labels": [ "Delta" ], "depth": 1, "kind": "leaf" }, { "id": "preview-category-4", "label": "Epsilon", "path": [ "Epsilon" ], "labels": [ "Epsilon" ], "depth": 1, "kind": "leaf" } ], "series": [ { "id": "preview-series-0", "label": "Cost", "columnPath": [ "Cost" ], "labels": [ "Cost" ], "kind": "leaf", "prop": "preview-0" }, { "id": "preview-series-1", "label": "Revenue", "columnPath": [ "Revenue" ], "labels": [ "Revenue" ], "kind": "leaf", "prop": "preview-1" }, { "id": "preview-series-2", "label": "Volume", "columnPath": [ "Volume" ], "labels": [ "Volume" ], "kind": "leaf", "prop": "preview-2" } ], "values": [ [ 18, 34, 12 ], [ 31, 52, 28 ], [ 46, 41, 18 ], [ 58, 73, 42 ], [ 76, 61, 32 ] ], "analyticalFrame": { "fields": [ { "id": "pivot:category", "label": "pivot:category", "role": "dimension", "semanticType": "category" }, { "id": "pivot:series", "label": "pivot:series", "role": "dimension", "semanticType": "category" }, { "id": "preview-series-0", "label": "Cost", "role": "measure", "semanticType": "number", "sourceField": "preview-0" }, { "id": "preview-series-1", "label": "Revenue", "role": "measure", "semanticType": "number", "sourceField": "preview-1" }, { "id": "preview-series-2", "label": "Volume", "role": "measure", "semanticType": "number", "sourceField": "preview-2" } ], "observations": [ { "id": "[\"preview-category-0\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Alpha", "label": "Alpha", "path": [ "Alpha" ], "labels": [ "Alpha" ] }, "pivot:series": { "value": "Cost", "label": "Cost", "path": [ "Cost" ], "labels": [ "Cost" ] } }, "measures": { "preview-series-0": 18 } }, { "id": "[\"preview-category-0\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Alpha", "label": "Alpha", "path": [ "Alpha" ], "labels": [ "Alpha" ] }, "pivot:series": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] } }, "measures": { "preview-series-1": 34 } }, { "id": "[\"preview-category-0\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Alpha", "label": "Alpha", "path": [ "Alpha" ], "labels": [ "Alpha" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-2": 12 } }, { "id": "[\"preview-category-1\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Beta", "label": "Beta", "path": [ "Beta" ], "labels": [ "Beta" ] }, "pivot:series": { "value": "Cost", "label": "Cost", "path": [ "Cost" ], "labels": [ "Cost" ] } }, "measures": { "preview-series-0": 31 } }, { "id": "[\"preview-category-1\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Beta", "label": "Beta", "path": [ "Beta" ], "labels": [ "Beta" ] }, "pivot:series": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] } }, "measures": { "preview-series-1": 52 } }, { "id": "[\"preview-category-1\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Beta", "label": "Beta", "path": [ "Beta" ], "labels": [ "Beta" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-2": 28 } }, { "id": "[\"preview-category-2\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Gamma", "label": "Gamma", "path": [ "Gamma" ], "labels": [ "Gamma" ] }, "pivot:series": { "value": "Cost", "label": "Cost", "path": [ "Cost" ], "labels": [ "Cost" ] } }, "measures": { "preview-series-0": 46 } }, { "id": "[\"preview-category-2\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Gamma", "label": "Gamma", "path": [ "Gamma" ], "labels": [ "Gamma" ] }, "pivot:series": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] } }, "measures": { "preview-series-1": 41 } }, { "id": "[\"preview-category-2\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Gamma", "label": "Gamma", "path": [ "Gamma" ], "labels": [ "Gamma" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-2": 18 } }, { "id": "[\"preview-category-3\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Delta", "label": "Delta", "path": [ "Delta" ], "labels": [ "Delta" ] }, "pivot:series": { "value": "Cost", "label": "Cost", "path": [ "Cost" ], "labels": [ "Cost" ] } }, "measures": { "preview-series-0": 58 } }, { "id": "[\"preview-category-3\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Delta", "label": "Delta", "path": [ "Delta" ], "labels": [ "Delta" ] }, "pivot:series": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] } }, "measures": { "preview-series-1": 73 } }, { "id": "[\"preview-category-3\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Delta", "label": "Delta", "path": [ "Delta" ], "labels": [ "Delta" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-2": 42 } }, { "id": "[\"preview-category-4\",\"preview-series-0\"]", "dimensions": { "pivot:category": { "value": "Epsilon", "label": "Epsilon", "path": [ "Epsilon" ], "labels": [ "Epsilon" ] }, "pivot:series": { "value": "Cost", "label": "Cost", "path": [ "Cost" ], "labels": [ "Cost" ] } }, "measures": { "preview-series-0": 76 } }, { "id": "[\"preview-category-4\",\"preview-series-1\"]", "dimensions": { "pivot:category": { "value": "Epsilon", "label": "Epsilon", "path": [ "Epsilon" ], "labels": [ "Epsilon" ] }, "pivot:series": { "value": "Revenue", "label": "Revenue", "path": [ "Revenue" ], "labels": [ "Revenue" ] } }, "measures": { "preview-series-1": 61 } }, { "id": "[\"preview-category-4\",\"preview-series-2\"]", "dimensions": { "pivot:category": { "value": "Epsilon", "label": "Epsilon", "path": [ "Epsilon" ], "labels": [ "Epsilon" ] }, "pivot:series": { "value": "Volume", "label": "Volume", "path": [ "Volume" ], "labels": [ "Volume" ] } }, "measures": { "preview-series-2": 32 } } ], "matrixCells": [ { "categoryId": "preview-category-0", "seriesId": "preview-series-0", "observationId": "[\"preview-category-0\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-1", "observationId": "[\"preview-category-0\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-0", "seriesId": "preview-series-2", "observationId": "[\"preview-category-0\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-0", "observationId": "[\"preview-category-1\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-1", "observationId": "[\"preview-category-1\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-1", "seriesId": "preview-series-2", "observationId": "[\"preview-category-1\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-0", "observationId": "[\"preview-category-2\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-1", "observationId": "[\"preview-category-2\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-2", "seriesId": "preview-series-2", "observationId": "[\"preview-category-2\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-0", "observationId": "[\"preview-category-3\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-1", "observationId": "[\"preview-category-3\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-3", "seriesId": "preview-series-2", "observationId": "[\"preview-category-3\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" }, { "categoryId": "preview-category-4", "seriesId": "preview-series-0", "observationId": "[\"preview-category-4\",\"preview-series-0\"]", "measureFieldId": "preview-series-0" }, { "categoryId": "preview-category-4", "seriesId": "preview-series-1", "observationId": "[\"preview-category-4\",\"preview-series-1\"]", "measureFieldId": "preview-series-1" }, { "categoryId": "preview-category-4", "seriesId": "preview-series-2", "observationId": "[\"preview-category-4\",\"preview-series-2\"]", "measureFieldId": "preview-series-2" } ] } }, "bindings": { "x": [ "preview-series-0" ], "y": [ "preview-series-1" ] }, "presentation": { "dataLabels": false }});
// When the host unmounts:// chart.destroy();Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.
Supported options
Section titled “Supported options”Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.
| Option | Default | Accepted values |
|---|---|---|
showGridLines | true | true or false |
markOpacity | 1 | 0.2 to 1; step 0.05 |
rendererPolicy | svg | svg, batched-svg, webgl |
Bind each group's X/Y measures explicitly. Named X definitions use axes.xAxes and bound Y series select them with seriesOverrides[id].xAxis. Secondary and named Y definitions use axes.ySecondary and axes.yAxes; assign bound Y series with seriesOverrides[id].yAxis. Domains, scales, reversal, ticks, errors and annotations follow the selected Y axis. Navigation and XY source brushing can target primary or named X and primary, secondary or named Y through navigation.xAxis and navigation.yAxis. Synchronization retains its separate compatibility rules and primary-Y limit. See value navigation and XY brushing. See relationship axis options and limits.
Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.
Related charts
Section titled “Related charts”- Bubble — Compare two measures while bubble area represents a third measure.
- Density scatter — Aggregate dense X/Y observations into spatial density.
- Connected scatter — Show the ordered path between paired X/Y observations.
- Quadrant chart — Compare observations across four decision regions.
Charts overview · Installation · Data & Configuration
Explicit renderer policy
Section titled “Explicit renderer policy”chartOptions.rendererPolicy accepts 'svg' | 'batched-svg' | 'webgl'. Omission keeps native SVG. See the WebGL capability, inspection, fallback and export contract and measured budgets. GPU selection does not raise existing source limits or imply SVG styling equivalence.
Datum and segment encodings
Section titled “Datum and segment encodings”Saved seriesOverrides[id].encoding policies and runtime
rendererOptions.datumStyle support scoped source styling. Use stable category
IDs for datum rules; directed segment rules apply to the supported native line
family only. Gradient/pattern fills, marker support, precedence, raw callback
contexts and clean-export behavior follow the datum styling capability
matrix. Authored encodings or runtime datum
callbacks force an individual-SVG fallback for batched/GPU requests; saved
renderer policy remains intact.