Import
tsx
import { ScatterChart } from "@indoku/ui"Examples
Basic
tsx
const pts = (n: number, a: number, b: number, seed: number) => Array.from({ length: n }, (_, i) => { const x = 1 + (i * 9) / n return { x: +x.toFixed(2), y: +(a * x + b + 3 * Math.sin(i * seed)).toFixed(2) } })const groupA = pts(18, 2, 4, 1.3)const groupB = pts(18, 1, 14, 2.1)const groupA = pts(18, 2, 4, 1.3)const groupB = pts(18, 1, 14, 2.1)function ScatterBasic() { return <Box maxW="2xl"><ScatterChart series={[{ name: "Group A", points: groupA }]} /></Box>}Grouped data
One series per group.
tsx
const pts = (n: number, a: number, b: number, seed: number) => Array.from({ length: n }, (_, i) => { const x = 1 + (i * 9) / n return { x: +x.toFixed(2), y: +(a * x + b + 3 * Math.sin(i * seed)).toFixed(2) } })const groupA = pts(18, 2, 4, 1.3)const groupB = pts(18, 1, 14, 2.1)const groupA = pts(18, 2, 4, 1.3)const groupB = pts(18, 1, 14, 2.1)const groupB = pts(18, 1, 14, 2.1)function ScatterGrouped() { return <Box maxW="2xl"><ScatterChart series={[{ name: "Group A", points: groupA }, { name: "Group B", points: groupB }]} legend /></Box>}Trend lines
trendLine fits a least-squares line per group.
tsx
const pts = (n: number, a: number, b: number, seed: number) => Array.from({ length: n }, (_, i) => { const x = 1 + (i * 9) / n return { x: +x.toFixed(2), y: +(a * x + b + 3 * Math.sin(i * seed)).toFixed(2) } })const groupA = pts(18, 2, 4, 1.3)const groupB = pts(18, 1, 14, 2.1)const groupA = pts(18, 2, 4, 1.3)const groupB = pts(18, 1, 14, 2.1)const groupB = pts(18, 1, 14, 2.1)function ScatterTrend() { return <Box maxW="2xl"><ScatterChart series={[{ name: "Group A", points: groupA }, { name: "Group B", points: groupB }]} trendLine legend /></Box>}Dot connectors
connect joins the points in order.
tsx
const pts = (n: number, a: number, b: number, seed: number) => Array.from({ length: n }, (_, i) => { const x = 1 + (i * 9) / n return { x: +x.toFixed(2), y: +(a * x + b + 3 * Math.sin(i * seed)).toFixed(2) } })const groupA = pts(18, 2, 4, 1.3)const groupB = pts(18, 1, 14, 2.1)const groupA = pts(18, 2, 4, 1.3)const groupB = pts(18, 1, 14, 2.1)function ScatterConnected() { return <Box maxW="2xl"><ScatterChart series={[{ name: "Path", points: groupA.slice(0, 10) }]} connect /></Box>}Props
ScatterChart
| Prop | Type | Default | Description |
|---|---|---|---|
series | ScatterSeries[] | – | Groups of { x, y } points. |
trendLine | boolean | false | Linear regression per group. |
connect | boolean | false | Line through points in order. |
dotSize | number | 4 | Dot radius. |
* required. Style props and HTML attributes are accepted as well.
Created by @indokudev