Data
Scatter Chart
semantic HTMLRelationship and distribution visualization for two numeric values.
Live example
| Guide posts | 2 min / 12 shares, 5 min / 31 shares |
|---|---|
| News posts | 3 min / 9 shares, 9 min / 51 shares |
<div data-standard-component="scatter-chart" label="Reading time and shares" data='{"series":[{"name":"Guide posts","data":[[2,12],[3,18],[4,22],[5,31],[6,28]]},{"name":"News posts","data":[[3,9],[5,19],[7,33],[9,51],[11,62]]}]}'><table><caption>Reading time and shares by post type</caption><tbody><tr><th>Guide posts</th><td>2 min / 12 shares, 5 min / 31 shares</td></tr><tr><th>News posts</th><td>3 min / 9 shares, 9 min / 51 shares</td></tr></tbody></table></div>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.1.5 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
ECharts SVG visualization with an accessible SSR data-table fallback.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->