Skip to content

Charts

Scatter Chart

Compares two numeric measures with keyboard-accessible points and an exact data table.

idle

Usage

import { ScatterChart } from "@mizen-labs/ui";

Examples

Study outcomes scatter chart

A labeled scatter chart with finite observations and axis names.

Study time and assessment score

Groups and bubbles

Up to three groups in palette order; size draws a third measure as bubble area.

Recommendations

Guidance	Practice
Do	Label both axes and units. Give points meaningful names and preserve access to exact values.

Usage boundaries

Guidance	Boundary
Scope	Association does not establish causation. The application owns statistical analysis and data preparation.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`aria-label`	`string`	`Required`	Names the chart and its data table.
`xAxisLabel / yAxisLabel`	`string`	`Required`	Names the horizontal and vertical measures.
`points`	`readonly ScatterChartPoint[]`	`Required`	Provides unique point IDs, labels, and finite x/y coordinates.
`formatX / formatY`	`(value: number) => string`	`English number formatting`	Formats axis ticks, point tooltips, and exact table values.
`tone`	`ChartSeriesTone`	`series1`	Selects a supported semantic chart tone.

Revenue per account

$742

+6.8%

Starter
Growth
Scale

Revenue per account against sessions, by plan values
Point	Sessions	Revenue per account
Account 1 · 2 seats	12	180
Account 2 · 3 seats	18	240
Account 3 · 2 seats	24	210
Account 4 · 4 seats	31	320
Account 5 · 3 seats	38	290
Account 6 · 5 seats	45	360
Account 7 · 8 seats	42	610
Account 8 · 12 seats	55	740
Account 9 · 10 seats	61	690
Account 10 · 14 seats	68	860
Account 11 · 12 seats	74	820
Account 12 · 16 seats	83	980
Account 13 · 30 seats	78	1,290
Account 14 · 38 seats	86	1,480
Account 15 · 34 seats	92	1,350
Account 16 · 44 seats	97	1,620

Study hours and assessment scores values
Point	Study hours per week	Assessment score
Student 1	2	62
Student 2	4	71
Student 3	7	83
Student 4	10	88

Study time and assessment score

Hours per week · assessment points

Students observed

7

2–12 hours of weekly study

Assessment scores by study hours values
Point	Study hours per week	Assessment score
Student 1	2	62
Student 2	4	71
Student 3	5	74
Student 4	6	79
Student 5	8	83
Student 6	10	88
Student 7	12	91

Starter
Growth
Scale

Revenue per account against sessions, by plan values
Point	Sessions	Revenue per account
Account 1 · 2 seats	12	180
Account 2 · 3 seats	18	240
Account 3 · 2 seats	24	210
Account 4 · 4 seats	31	320
Account 5 · 3 seats	38	290
Account 6 · 5 seats	45	360
Account 7 · 8 seats	42	610
Account 8 · 12 seats	55	740
Account 9 · 10 seats	61	690
Account 10 · 14 seats	68	860
Account 11 · 12 seats	74	820
Account 12 · 16 seats	83	980
Account 13 · 30 seats	78	1,290
Account 14 · 38 seats	86	1,480
Account 15 · 34 seats	92	1,350
Account 16 · 44 seats	97	1,620