Scatter chart
Repeated observations across an ordered set for trends, clusters, density, and outliers.
- Purpose
- Compare repeated observations, trends, clusters, and outliers across an ordered set of categories.
- Use when
- Use when point position, overlap, and density reveal variation that bars would hide.
- Avoid when
- Avoid when categories lack meaningful order, values need a continuous numeric x-axis, or every observation must be read immediately.
- Equivalent data
- Names, captions, symbols, and selected-label summaries do not depend on color. For dense data, keep an equivalent caller-owned table, download, or drill-down instead of expanding thousands of values into page text.
@scatter.Scatter(scatter.Config{
Label: "Basic scatter chart with one missing Email observation",
Categories: []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"},
Series: []scatter.Series{
{Name: "Email", Values: [][]float64{{120}, {132}, {101}, {}, {90}, {230}, {210}}},
// Four more named series retain the same seven aligned categories.
},
Options: scatter.Options{Symbol: scatter.SymbolDot, Size: 4},
Title: scatter.TitleOptions{Text: "Scatter", FontSize: 16},
Legend: scatter.LegendOptions{Padding: scatter.Padding{Left: 100}},
Width: 600, Height: 400,
})Per-series symbols
Circle, diamond, square, and filled-dot markers preserve the upstream four-series comparison and add a non-color channel for identification.
@scatter.Scatter(scatter.Config{
Label: "Scatter series with distinct point symbols",
Categories: week,
Series: []scatter.Series{
{Name: "Email", Values: email, Options: scatter.Options{Symbol: scatter.SymbolCircle}},
{Name: "Union Ads", Values: union, Options: scatter.Options{Symbol: scatter.SymbolDiamond}},
{Name: "Video Ads", Values: video, Options: scatter.Options{Symbol: scatter.SymbolSquare}},
{Name: "Direct", Values: direct, Options: scatter.Options{Symbol: scatter.SymbolDot}},
},
Options: scatter.Options{Size: 4},
Width: 600, Height: 400,
})Dense multi-value observations
Three deterministic 1,000-category bounded random walks retain repeated samples, SMA(100) trends, maximum reference lines, compact points, sampled and rotated axis labels, explicit bounds and units, right-side vertical legend, padding, and responsive theme tokens.
@scatter.Scatter(scatter.Config{
Label: "Dense scatter data",
Categories: labels,
Width: 600, Height: 400,
Options: scatter.Options{Size: 0.5, Trend: scatter.TrendLine{
Kind: scatter.TrendSimpleMovingAverage, Period: 100,
}},
Series: []scatter.Series{
{Name: "One", Values: values[0], Options: scatter.Options{ReferenceLine: scatter.ReferenceLineMaximum}},
{Name: "Two", Values: values[1], Options: scatter.Options{ReferenceLine: scatter.ReferenceLineMaximum}},
{Name: "Three", Values: values[2]},
},
})Top value labels
Select exactly the highest N observations with deterministic input-order tie handling. Labels use chart-theme tokens by default; the accessible summary keeps every exact value and selection state available without color dependence.
Exact values and selected labels
| Category | Series | Value | Selected label |
|---|---|---|---|
| Day 1 | Daily Visitors (k) | 15.2 | No |
| Day 2 | Daily Visitors (k) | 18.5 | No |
| Day 3 | Daily Visitors (k) | 22.1 | No |
| Day 4 | Daily Visitors (k) | 19.8 | No |
| Day 5 | Daily Visitors (k) | 25.4 | No |
| Day 6 | Daily Visitors (k) | 21.3 | No |
| Day 7 | Daily Visitors (k) | 17.9 | No |
| Day 8 | Daily Visitors (k) | 32.6 | No |
| Day 9 | Daily Visitors (k) | 28.1 | No |
| Day 10 | Daily Visitors (k) | 24.7 | No |
| Day 11 | Daily Visitors (k) | 31.5 | No |
| Day 12 | Daily Visitors (k) | 29.3 | No |
| Day 13 | Daily Visitors (k) | 26.8 | No |
| Day 14 | Daily Visitors (k) | 35.2 | No |
| Day 15 | Daily Visitors (k) | 41.7 | Yes |
| Day 16 | Daily Visitors (k) | 38.9 | No |
| Day 17 | Daily Visitors (k) | 33.1 | No |
| Day 18 | Daily Visitors (k) | 29.6 | No |
| Day 19 | Daily Visitors (k) | 27.4 | No |
| Day 20 | Daily Visitors (k) | 30.8 | No |
| Day 21 | Daily Visitors (k) | 36.3 | No |
| Day 22 | Daily Visitors (k) | 42.1 | Yes |
| Day 23 | Daily Visitors (k) | 39.5 | No |
| Day 24 | Daily Visitors (k) | 44.8 | Yes |
| Day 25 | Daily Visitors (k) | 48.3 | Yes |
| Day 26 | Daily Visitors (k) | 45.6 | Yes |
| Day 27 | Daily Visitors (k) | 40.2 | No |
| Day 28 | Daily Visitors (k) | 37.9 | No |
| Day 29 | Daily Visitors (k) | 34.5 | No |
| Day 30 | Daily Visitors (k) | 26.1 | No |
@scatter.Scatter(scatter.Config{
Label: "Website traffic over 30 days with peak-day labels",
Categories: days,
Series: []scatter.Series{{Name: "Daily Visitors (k)", Values: values}},
Options: scatter.Options{TopNLabels: scatter.TopNLabels{
Count: 5, FontSize: 16, Color: "var(--color-chart-danger)",
}},
Title: scatter.TitleOptions{Text: "Website Traffic Over 30 Days - Peak Days Highlighted", Subtext: "(Only top 5 traffic days show labels)"},
Legend: scatter.LegendOptions{Hidden: true},
YAxis: scatter.ValueAxisOptions{Min: &zero, Max: &maximum},
Padding: scatter.Padding{Top: 20, Right: 20, Bottom: 20, Left: 20},
Width: 800, Height: 500,
})Whole-number formatting
The option-function source reuses the basic data with hollow circles and integer axis labels. Goshtoso expresses that visual result through typed options, without exposing callbacks or renderer option functions.
@scatter.Scatter(scatter.Config{
Label: "Basic scatter chart with circle symbols and integer labels",
Categories: week,
Series: series,
Options: scatter.Options{
Symbol: scatter.SymbolCircle,
ValueFormat: scatter.ValueFormatInteger,
},
Width: 600, Height: 400,
})Static/vector behavior
Scatter renders inline SVG on the server, follows Goshtoso and AraiHu tokens in light and dark mode, preserves print and no-JavaScript readability, and supports resolved SVG plus opaque or transparent PNG download through the shared wrapper. Wrapper lifecycle, modes, controls, export, and client events stay in the shared chart controls and chart modes guides.
Go API
v0.0.1The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.
github.com/araihu/goshtoso-charts/components/scatterEnabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.