Scatter chart
The relation between two measures, a bubble's area for a third, a colour per group, and the correlation said in words.
Web only — React, from @krizaka/charts/scatter. Beta: its API may still change in a minor version.
When to use
- Whether two measures move together: a video's length and its watch time, a job's input and its duration.
- Outliers in a population.
When not to use
- A trend over time.Use instead: Line chart
- Measures of a few entities on a common scale.Use instead: Radar chart
Installation
Install
npm install @krizaka/chartsImport
import { ScatterChart } from "@krizaka/charts/scatter";Examples
Length and watch time
Orochia videos: length against average watch time, bubbles by views, a colour per format.
Length and watch time
Last 36 videos · bubble area = views
Scatter chart, 36. Length (min): 1 – 47; Average watch (min): 0.5 – 31.1; correlation 0.98.
| Category | Length (min) | Average watch (min) | Views |
|---|---|---|---|
| Video 1 | 1 | 0.5 | 800 |
| Video 2 | 15 | 8.2 | 1.8K |
| Video 3 | 32 | 18.8 | 2.8K |
| Video 4 | 4 | 5.2 | 3.7K |
| Video 5 | 18 | 8.6 | 4.7K |
| Video 6 | 47 | 27.1 | 5.7K |
| Video 7 | 3 | 3.4 | 6.7K |
| Video 8 | 21 | 9.1 | 7.6K |
| Video 9 | 32 | 21.8 | 8.6K |
| Video 10 | 2 | 1.6 | 9.6K |
| Video 11 | 24 | 9.5 | 1.6K |
| Video 12 | 47 | 30.1 | 2.5K |
| Video 13 | 1 | 0.5 | 3.5K |
| Video 14 | 9 | 6.3 | 4.5K |
| Video 15 | 32 | 19.8 | 5.5K |
| Video 16 | 4 | 1.2 | 6.5K |
| Video 17 | 12 | 6.8 | 7.4K |
| Video 18 | 47 | 28.1 | 8.4K |
| Video 19 | 3 | 4.4 | 9.4K |
| Video 20 | 15 | 7.2 | 1.4K |
| Video 21 | 32 | 17.8 | 2.3K |
| Video 22 | 2 | 2.6 | 3.3K |
| Video 23 | 18 | 7.6 | 4.3K |
| Video 24 | 47 | 31.1 | 5.3K |
| Video 25 | 1 | 0.8 | 6.2K |
| Video 26 | 21 | 8.1 | 7.2K |
| Video 27 | 32 | 20.8 | 8.2K |
| Video 28 | 4 | 2.2 | 9.2K |
| Video 29 | 24 | 13.5 | 1.2K |
| Video 30 | 47 | 29.1 | 2.1K |
| Video 31 | 3 | 0.5 | 3.1K |
| Video 32 | 9 | 5.3 | 4.1K |
| Video 33 | 32 | 18.8 | 5.1K |
| Video 34 | 2 | 3.6 | 6K |
| Video 35 | 12 | 5.8 | 7K |
| Video 36 | 47 | 27.1 | 8K |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | readonly T[] | — | One row per point. |
titlerequired | string | — | What the chart shows, in a few words: its accessible name, and its heading unless hideTitle. |
xrequired | string | ((datum: T, index: number) => number) | — | The fields of the two measures. |
xLabelrequired | string | — | The names of the measures: the axes, the tooltip, the table. |
yrequired | string | ((datum: T, index: number) => number) | — | The field of the vertical measure. |
yLabelrequired | string | — | The name of the vertical measure. |
brand | BrandId | — | The brand whose palette the charts use. Without it, a chart follows a .brand-<id> ancestor, else Krizaka. Set it
when the app loads a brand stylesheet on :root (@krizaka/tokens/brands/orazaka.css). |
className | string | — | A class on the figure (layout: margins, grid placement). |
dataTable | boolean | — | The "Show data" button (the table is in the page for screen readers either way). Default true. |
description | ReactNode | — | A sentence under the title: the period, the unit, the source. |
empty | ReactNode | — | What to show when there is nothing to draw (default: the empty label). An EmptyState of
@krizaka /ui fits. |
error | ReactNode | — | The data could not be loaded: true says the default words, a node says yours (a retry button…). |
exportable | boolean | readonly ExportFormat[] | — | Export buttons: true for PNG, SVG and CSV, or the formats you want. |
group | string | ((datum: T, index: number) => string) | — | The field of a point's group: one colour per group (three at most read apart for everyone). |
height | number | — | The height of the plot in pixels. Default 280 (a sparkline: 32). |
hideTitle | boolean | — | Visually hide the title (it stays the chart's accessible name): a card that already has its heading. |
id | string | — | The id of the figure. |
labels | ChartLabelsInput | — | The words, translated: the buttons, the states, the written summary. |
live | boolean | — | Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point. |
loading | boolean | — | The data is on its way: a skeleton of the chart, announced once. |
locale | Locale | — | The locale of every figure and date ("fr-FR"). Default "en-US". |
name | string | ((datum: T, index: number) => string) | — | The field naming a point (the tooltip's title). |
renderer | Renderer | — | svg (default): sharp, exportable as SVG. canvas: for tens of thousands of marks. |
size | string | ((datum: T, index: number) => number) | — | A third measure, drawn as the bubble's area. |
sizeFormat | ValueFormat | — | How the third measure (the bubbles) is written. |
sizeLabel | string | — | The name of the third measure. |
style | CSSProperties | — | Inline style on the figure (layout only: colours come from the tokens). |
summary | "hidden" | "visible" | — | The written summary: read by screen readers only ("hidden", default), or shown under the chart ("visible"). |
summaryText | string | — | Your own summary instead of the generated one (still read first by screen readers). |
thresholds | readonly Threshold[] | — | Horizontal lines at a y value. |
xFormat | ValueFormat | — | How each measure is written. |
yFormat | ValueFormat | — | How the vertical measure is written. |
Accessibility
- The plot is a group named by the title and described by a summary written from the data, read before anything else.
- The data table is always in the page for assistive technology; “Show data” reveals it for everyone.
- The engine (ECharts core and this one chart type) loads when the chart nears the screen; a skeleton of the same height holds its place, so nothing shifts.
- Under reduced motion the chart is drawn without animation.
- The summary gives both ranges and Pearson's correlation.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves the focus to the plot (one tab stop), then to the data and export buttons. |
| Arrow keys | Walk the items one by one: each is announced and highlighted, its tooltip shown. |
| Home / End | Jump to the first or the last item. |
| Esc | Hides the tooltip and clears the highlight. |
Best practices
- Keep to three groups: past that, colours stop reading apart for everyone.
- Use
renderer="canvas"past a few thousand points.
Related components
Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub