Scatter chart

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Plot two measures per item, one point each, such as holdings by quality and news sentiment or models by throughput and latency. Give a title, a factual summary, and both axis names, with units where the values have them. groups tell points apart by the chart's category hues and by marker, such as aligned and diverged; a group's color can be one of your own. Without groups every point is one ink. references draw a line at x or at y, such as a midpoint or a target; one on each axis splits the plot, and quadrants names the four parts in their corners. xDomain and yDomain fix a known scale, such as 0 to 10 for a score; without them the axes take round values around the points and the lines.

• Don't use ScatterChart for a measure over time. Use LineChart.
• Don't color a point by its quadrant alone. Give it a group, so the marker says it too, or let the quadrant names say where it is.
• Don't expect the description prop to be an automatically inferred analysis. It holds the caller's factual summary.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

figure → figcaption(title + summary) + legend (groups, references) + named axes + focusable plot (Recharts ScatterChart) + persistent inline value readout + details → Table.Container → table of every point

Keyboard and accessibility

• Tab reaches the plot and the data table toggle.
• With the plot focused, Left and Right step through the points from left to right, lower first where two share an x; Home and End reach the first and last. Escape clears the details.
• Pointer, touch and the arrow keys ring the point and show its name and values in a box beside it. The same values fill the details region below the plot, a polite live region; the box stays out of the accessibility tree.
• The readout and the table name each point's group and quadrant. Points without both values stay out of the plot and in the table.
• Circle, square and triangle markers tell groups apart beyond color, and remain in high contrast mode.
• While the chart's room keeps changing, as while a sidebar slides, the plot holds the width it was drawn at, clipped to the chart, and redraws once the room settles.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { ScatterChart } from '@surflane/ui/scatter-chart'

<ScatterChart
  title='Quality against news sentiment'
  description='Each holding by its quality score and its news sentiment, both out of 10.'
  data={[
    { id: 'northwind', label: 'Northwind Chips', x: 8.2, y: 7.1, group: 'aligned' },
    { id: 'atlas', label: 'Atlas Telecom', x: 6.1, y: 3.8, group: 'diverged' },
  ]}
  groups={[
    { key: 'aligned', label: 'Aligned' },
    { key: 'diverged', label: 'Diverged' },
  ]}
  xLabel='Quality score'
  yLabel='News sentiment'
  xDomain={[0, 10]}
  yDomain={[0, 10]}
  references={[
    { x: 5, label: 'Quality midpoint' },
    { y: 5, label: 'Sentiment midpoint' },
  ]}
  quadrants={{ topRight: 'Strong and liked', bottomRight: 'Strong but disliked' }}
/>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens