Data visualization

Series count: with 1–3 series, color alone is enough; 4 series require direct labels; 5–6 is the soft limit (legend or small multiples); 7–8 is the token limit. A 9th series never gets a new color: merge it into “Other”, split into small multiples, or combine encodings.

Dark is not an automatic inversion: the same 8 hues each get their own step for dark surfaces (OKLCH L 0.48–0.67) and are checked again on #292929. In the High contrast theme every mark turns white, and identity moves to 45° / 135° hatching (columns, slices) and dashes (lines).

# From the dataviz skill folder: run once per mode, on the chart's actual surface
node scripts/validate_palette.js "#c2347a,#2f6fd0,#b78300,#7a5ad6,#0e9f8a,#d65a22,#0a8fb8,#4e8a1e" --mode light --surface "#ffffff"
node scripts/validate_palette.js "#e24a92,#4a8eeb,#c08400,#9079e6,#14a08a,#e0662e,#22a4c6,#5fa032" --mode dark --surface "#292929"

# "All pairs" forms (scatter, maps, small multiples): first 3 colors only
node scripts/validate_palette.js "#c2347a,#2f6fd0,#b78300" --mode light --surface "#ffffff" --pairs all

Sequential is a single Sakura hue from light to dark (in dark the anchor is reversed, so small values sink into the background). For discrete ranks (funnels, rankings), use only steps 3–7 so the lightest step stays at ≥ 2:1 (checked with --ordinal). Diverging runs Sakura ↔ Ai with a neutral gray midpoint, never a hue. Status colors (success / warning / danger) are not part of the categorical palette and always come with an icon and text.

/* src/styles/charts.css — use in SVG via style={{ fill: "var(--…)" }} */
--colorChartCategorical1 … 8   /* series identity, fixed order */
--colorChartSequential1 … 7    /* magnitude, a single Sakura hue (ordinal: steps 3–7 only) */
--colorChartDivergingNeg / Mid / Pos
--colorChartOther              /* "Other", background series */
--colorChartSurface  --colorChartGrid  --colorChartAxis  --colorChartCrosshair
--colorChartLabel  --colorChartLabelStrong
--chartAreaOpacity  --chartDimOpacity

• Line / area: a vertical crosshair snaps to the nearest X value; one tooltip lists every series at that point.
• Column / slice: the mark itself is the hit area (wider than the mark, gap included); the selected mark stands out and the others dim.
• In the tooltip, the value is bold and comes first; the series name is secondary, keyed by a short stroke in the series color (not a filled square). The legend mirrors the mark: a square for columns / areas, a stroke for lines.
• On multi-series charts, legend items are toggle buttons; the remaining series keep their colors (color follows the entity, not its rank).
• Filters (date range, dimension) sit in a row above all the charts they affect, not inside a chart card.

• The frame is a figure named by its title; the SVG plot area has an aria-label that summarizes the data; each focusable data point is role="img" labelled “category, series: value”.
• The Bảng dữ liệu (Data table) button switches to a table with column and row headers, the WCAG-conformant equivalent of the chart.
• The High contrast theme and forced-colors turn on hatching / dashes automatically; the texture prop turns them on manually (print, complete color blindness).
• Numbers and dates are formatted with Intl using locale (default vi-VN): compact axis labels (1 N / 2,5 Tr in vi-VN, 1K / 2.5M in en-US), full values in tooltips and the table.
• The plot area is always dir="ltr" (the time axis does not flip); the title, legend and tooltip follow the page's text direction.
• Entry animations (columns growing from the baseline, lines drawing in) are turned off entirely with prefers-reduced-motion.