@squadbase/vantage 0.6.2-dev1.b28a4df → 0.6.2-dev1.b40ce36

package/registry/ui/kpi-card.tsx

@@ -43,7 +43,7 @@
  *   line takes its name from it ("昨日 617"), the same way a `label` on any `vs` does.
  * - **Two or more comparisons sit under the value**, not beside it, so the value
  *   keeps its place and its width whatever the card holds.
- * - **Polarity drives everything.** With `polarity="lower-is-better"` the target
+ * - **`betterWhen` drives everything.** With `betterWhen="down"` the target
  *   is met at or below it, and the record badge marks the lowest value.
  * - **Rates change in points.** With a `percent` format the delta and
  *   `{difference}` are in percentage points ("-0.5pt"); `change="relative"` opts
@@ -147,7 +147,9 @@ export interface KpiCardProps extends Omit<ComponentProps<"div">, "children"> {
    * @example provisional  /  provisional={{ label: "暫定" }}
    */
   provisional?: boolean | { label?: string }
-  /** Whether a rise is good. Default `"higher-is-better"`. `"neutral"` never colours the change and skips the target and record logic. */
+  /** Which direction is good: `"up"` (default) or `"down"` (churn, error rate). Wins over `polarity`. */
+  betterWhen?: "up" | "down"
+  /** @deprecated Older name of `betterWhen` (`"higher-is-better"` / `"lower-is-better"`). `"neutral"` (never colours the change, skips the target and record logic) is only reachable here. `betterWhen` wins if both are given. */
   polarity?: Polarity
   /** `"relative"` ("+12.4%"), `"points"` ("-0.5pt") or `"difference"` ("+¥530万", in `format`). Default: points for a `percent` format, else relative. */
   change?: ChangeDisplay
@@ -160,7 +162,7 @@ export interface KpiCardProps extends Omit<ComponentProps<"div">, "children"> {
   /**
    * Target for the current period. Under the value it adds a 6px bar (actual, the pace
    * projection, a tick at the target) and one line "目標の 49%・このペースなら 98%"
-   * (the projection only while `period` is in progress). With `polarity="lower-is-better"`
+   * (the projection only while `period` is in progress). With `betterWhen="down"`
    * or a rate target (points) there is no bar: "目標 … まであと …" in the footer.
    */
   target?: number
@@ -235,6 +237,11 @@ const DELTA_PLACEMENT =
  * (32px; 24px for `sm`), so 218px / 288px here are the 250px / 320px card widths. It also owns the gap above the footer.
  */
 const HEADER_CLASS = "@container/card pb-(--card-spacing)"
+/** A value this long (a huge standard-notation currency) may wrap between digit groups, and its delta then moves under it so the number gets the full row. Ordinary values stay on one line beside the delta. */
+const LONG_VALUE_CHARS = 10
+const DELTA_UNDER_PLACEMENT = "col-start-1 row-span-1 row-start-3 justify-self-start"
+// No grey footer band: value, comparison and notes share one surface, 8px apart (the footer only keeps its subgrid row).
+const KPI_FOOTER_CLASS = "flex-col items-start gap-2 rounded-none border-t-0 bg-transparent pt-0 text-sm"
 
 const PLACEHOLDER = /\{(\w+)\}/g
 
@@ -307,6 +314,11 @@ function warnShallowSummary(template: string) {
   )
 }
 
+/** Splits formatted text after each thousands separator so a huge standard-notation value wraps between digit groups instead of clipping. The text itself is unchanged. */
+function digitGroups(text: string): string[] {
+  return text.match(/[^,，]*[,，]|[^,，]+$/g) ?? [text]
+}
+
 export function KpiCard({
   label,
   value,
@@ -315,7 +327,8 @@ export function KpiCard({
   comparison: comparisonProp,
   comparisons,
   provisional,
-  polarity,
+  betterWhen,
+  polarity: polarityProp,
   change,
   neutralBand,
   showPrevious = true,
@@ -342,6 +355,8 @@ export function KpiCard({
   const isProvisional = provisional !== undefined && provisional !== false
   const provisionalLabel = typeof provisional === "object" && provisional.label ? provisional.label : "速報"
   const sample = useSampleMark()
+  // `betterWhen` is the documented name and wins over the older `polarity`.
+  const polarity: Polarity | undefined = betterWhen ? (betterWhen === "down" ? "lower-is-better" : "higher-is-better") : polarityProp
   const neutral = polarity === "neutral"
   const hasPrevious = comparison !== undefined && showPrevious
   // Two or more badges would squeeze the value from the right; they get their own row under it instead.
@@ -417,7 +432,7 @@ export function KpiCard({
           ) : null}
         </CardHeader>
         {(summary || record || (hasTarget && !targetBar) || sourceParts.length > 0 || hasUpdated || showSparkline) && (
-          <CardFooter className="flex-col items-start gap-1.5 text-sm">
+          <CardFooter className={KPI_FOOTER_CLASS}>
             {summary && <Skeleton aria-hidden="true" className="h-5 w-4/5" />}
             {record && <Skeleton aria-hidden="true" className="h-5 w-28 rounded-4xl" />}
             {hasTarget && !targetBar && <Skeleton aria-hidden="true" className="h-5 w-3/5" />}
@@ -535,22 +550,34 @@ export function KpiCard({
     />
   ))
 
+  const valueText = fmt(value)
+  const longValue = valueText.length > LONG_VALUE_CHARS
+
   return (
     <Card data-slot="kpi-card" size={size} className={cardClass} {...props}>
       <CardHeader className={HEADER_CLASS}>
-        <CardDescription data-slot="kpi-card-label" title={label} className="col-start-1 min-w-0 truncate text-[13px] font-medium text-muted-foreground">
+        <CardDescription data-slot="kpi-card-label" title={label} className="col-start-1 min-w-0 truncate text-[13px] leading-snug font-medium text-muted-foreground">
           {label}
         </CardDescription>
         <CardTitle
           data-slot="kpi-card-value"
-          title={fmt(value)}
+          title={valueText}
           className={cn(
-            "col-start-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 font-semibold tracking-tight tabular-nums",
+            "col-start-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 leading-none font-semibold tracking-tight tabular-nums",
             // Fixed size: the step follows the card width only, never the length of the value.
             valueSize,
           )}
         >
-          <span className="whitespace-nowrap">{fmt(value)}</span>
+          <span data-slot="kpi-card-value-text" className={longValue ? "min-w-0 break-words" : "whitespace-nowrap"}>
+            {longValue
+              ? digitGroups(valueText).map((group, i) => (
+                  <span key={i} className="whitespace-nowrap">
+                    {group}
+                    <wbr />
+                  </span>
+                ))
+              : valueText}
+          </span>
           {isProvisional && (
             <Badge data-slot="kpi-card-provisional" variant="outline" className="align-middle">
               {provisionalLabel}
@@ -564,7 +591,7 @@ export function KpiCard({
               {deltas}
             </div>
           ) : (
-            <CardAction className={DELTA_PLACEMENT}>{deltas}</CardAction>
+            <CardAction className={longValue ? DELTA_UNDER_PLACEMENT : DELTA_PLACEMENT}>{deltas}</CardAction>
           ))}
         {hasPrevious && comparison && (
           <div data-slot="kpi-card-previous" className="col-span-full text-sm text-muted-foreground tabular-nums">
@@ -614,9 +641,9 @@ export function KpiCard({
         )}
       </CardHeader>
       {hasFooter && (
-        <CardFooter className="flex-col items-start gap-1.5 text-sm">
+        <CardFooter className={KPI_FOOTER_CLASS}>
           {summaryText && (
-            <p data-slot="kpi-card-summary" title={summaryText} className="line-clamp-2 font-medium tabular-nums">
+            <p data-slot="kpi-card-summary" title={summaryText} className="line-clamp-2 text-sm leading-relaxed text-muted-foreground tabular-nums">
               {summaryText}
             </p>
           )}
@@ -634,13 +661,13 @@ export function KpiCard({
             <p
               data-slot="kpi-card-source"
               title={sourceParts.join("・")}
-              className="line-clamp-2 w-full text-xs text-muted-foreground tabular-nums"
+              className="line-clamp-2 w-full text-xs leading-normal text-muted-foreground tabular-nums"
             >
               {sourceParts.join("・")}
             </p>
           )}
           {hasUpdated && (
-            <p data-slot="kpi-card-updated" className="text-xs text-muted-foreground">
+            <p data-slot="kpi-card-updated" className="text-xs leading-normal text-muted-foreground">
               {updatedAtText(updatedAt, updatedAtDisplay, locale, now, timeZone)}
             </p>
           )}

package/registry/ui/legend.tsx

@@ -17,7 +17,7 @@ import { forwardRef } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
 import type { ChartSeriesColor } from "@squadbase/vantage/components"
-import { createContext, useCallback, useEffect, useRef, useState, type ForwardedRef } from "react"
+import { createContext, useCallback, useEffect, useRef, useState, type ForwardedRef, type RefObject } from "react"
 import type { ChartTone } from "@squadbase/vantage/components"
 import { DEFAULT_LOCALE, EMPTY_VALUE, formatValue, toValueFormatter, type ValueFormat } from "@squadbase/vantage/components"
 import type { ChartColor, ChartColors, ValueFormatter } from "@squadbase/vantage/components"
@@ -50,6 +50,8 @@ const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--ch
 interface ChartTokens {
   /** Resolved `--chart-1..5`, in order. */
   series: string[]
+  /** Computed `font-family` of the container, so canvas text matches the DOM. Optional. */
+  fontFamily?: string
   /** Body text: titles and the default `textStyle`. */
   foreground: string | null
   /** Secondary text: axis labels, legend, subtitles. */
@@ -58,10 +60,23 @@ interface ChartTokens {
   border: string | null
   /** Tooltip surface. */
   popover: string | null
+  /** Semantic and surface dependencies used by typed chart options. Optional for hand-built tokens. */
+  colors?: Record<string, string>
+  /** Actual inherited painting surface (may change without a token changing). */
+  surface?: string | null
   /** Tooltip text. */
   popoverForeground: string | null
 }
 
+// Keep scope out of the public token shape. A resolved snapshot remembers where arbitrary
+// var(--token) expressions must be read, without retaining unmounted charts globally.
+const tokenScopes = new WeakMap<ChartTokens, Element>()
+const OPTION_COLOR_TOKENS = [
+  "--background", "--card", "--muted", "--primary", "--destructive",
+  ...["positive", "negative", "warning", "neutral", "info"].flatMap((tone) =>
+    ["", "-fill", "-subtle"].map((suffix) => `--${tone}${suffix}`)),
+]
+
 let normalizeContext: CanvasRenderingContext2D | null | undefined
 
 /** The forms `fillStyle` serializes legacy colours to, and zrender can parse. */
@@ -117,14 +132,19 @@ function readChartTokens(el?: Element | null): ChartTokens | null {
     const color = read(token)
     if (color) series.push(color)
   }
-  return {
+  const tokens: ChartTokens = {
     series,
+    colors: Object.fromEntries(OPTION_COLOR_TOKENS.map((name) => [name, styles.getPropertyValue(name).trim()])),
+    surface: readChartSurface(target),
+    ...(styles.fontFamily ? { fontFamily: styles.fontFamily } : {}),
     foreground: read("--foreground"),
     mutedForeground: read("--muted-foreground"),
     border: read("--border"),
     popover: read("--popover"),
     popoverForeground: read("--popover-foreground"),
   }
+  tokenScopes.set(tokens, target)
+  return tokens
 }
 
 /** Structural equality, so a theme toggle that changes nothing doesn't re-init. */
@@ -132,8 +152,13 @@ function sameChartTokens(a: ChartTokens | null, b: ChartTokens | null): boolean
   if (a === b) return true
   if (!a || !b) return false
   return (
+    tokenScopes.get(a) === tokenScopes.get(b) &&
+    a.surface === b.surface &&
+    Object.keys(a.colors ?? {}).length === Object.keys(b.colors ?? {}).length &&
+    Object.entries(a.colors ?? {}).every(([name, value]) => b.colors?.[name] === value) &&
     a.series.length === b.series.length &&
     a.series.every((color, i) => color === b.series[i]) &&
+    a.fontFamily === b.fontFamily &&
     a.foreground === b.foreground &&
     a.mutedForeground === b.mutedForeground &&
     a.border === b.border &&
@@ -156,7 +181,7 @@ function sameChartTokens(a: ChartTokens | null, b: ChartTokens | null): boolean
  *    attributes alone leaves the chart painted in the previous palette until a
  *    reload — the tokens in the DOM are new, the canvas is not.
  */
-function watchChartTokens(onChange: () => void): () => void {
+function watchChartTokens(onChange: () => void, scope?: Element | null): () => void {
   if (typeof document === "undefined") return () => {}
   // Style edits arrive as bursts of mutations; coalesce them into one read, and
   // take it after the next frame so a swapped stylesheet has been applied.
@@ -171,8 +196,11 @@ function watchChartTokens(onChange: () => void): () => void {
 
   const themeObserver = new MutationObserver(schedule)
   const attributeFilter = ["class", "style", "data-theme"]
-  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter })
-  if (document.body) themeObserver.observe(document.body, { attributes: true, attributeFilter })
+  // Only the chart and its ancestors can change its inherited theme. Never observe
+  // the document subtree: canvas/tooltip/rendering mutations would trigger every chart.
+  for (let node: Element | null = scope ?? document.body ?? document.documentElement; node; node = node.parentElement) {
+    themeObserver.observe(node, { attributes: true, attributeFilter })
+  }
 
   const styleObserver = new MutationObserver(schedule)
   if (document.head) {
@@ -228,7 +256,7 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     // Let the page background show through: charts sit on cards, not on a canvas.
     backgroundColor: "transparent",
     ...(tokens.series.length > 0 ? { color: tokens.series } : {}),
-    textStyle: { color: text },
+    textStyle: { color: text, ...(tokens.fontFamily ? { fontFamily: tokens.fontFamily } : {}) },
     title: { textStyle: { color: text }, subtextStyle: { color: muted } },
     legend: { textStyle: { color: muted } },
     categoryAxis: axisTheme(tokens, false),
@@ -244,7 +272,11 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
       padding: [8, 12],
       // Rounded card with a soft shadow; in dark mode the shadow barely shows, so the border carries the edge.
       extraCssText: "border-radius:8px;box-shadow:var(--shadow-card, 0 4px 12px rgb(0 0 0 / 0.08));",
-      textStyle: { color: tokens.popoverForeground ?? undefined, fontSize: 12 },
+      textStyle: {
+        color: tokens.popoverForeground ?? undefined,
+        fontSize: 12,
+        ...(tokens.fontFamily ? { fontFamily: tokens.fontFamily } : {}),
+      },
       axisPointer: { lineStyle: { color: line }, crossStyle: { color: line } },
     },
   }
@@ -256,22 +288,23 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
  * components that build an ECharts option from token colours themselves (the
  * typed charts), so their palette follows light/dark like `EChart`'s theme.
  */
-function useChartTokens(): ChartTokens | null {
+function useChartTokens(scope?: Element | null | RefObject<Element | null>): ChartTokens | null {
   const [tokens, setTokens] = useState<ChartTokens | null>(() => readChartTokens())
   // Compared here, not inside a `setTokens` updater: an updater that reads the DOM is
   // replayed by React on every rebase and returns a fresh object each time, so the state
   // never settles ("Maximum update depth exceeded" once the tokens change after mount).
   const tokensRef = useRef(tokens)
   useEffect(() => {
+    const target = scope && "current" in scope ? scope.current : scope
     const sync = () => {
-      const next = readChartTokens()
+      const next = readChartTokens(target)
       if (sameChartTokens(tokensRef.current, next)) return
       tokensRef.current = next
       setTokens(next)
     }
     sync()
-    return watchChartTokens(sync)
-  }, [])
+    return watchChartTokens(sync, target)
+  }, [scope])
   return tokens
 }
 
@@ -283,7 +316,7 @@ const EMBEDDED_VAR_RE = /var\(\s*(--[\w-]+)\s*\)/g
 /**
  * Turn chart colours into canvas-safe strings. `"chart-1"`〜`"chart-5"` come from
  * the resolved series tokens; `"positive"` / `"warning"` / `"negative"` / `"neutral"` (and the area
- * variants `"positive-fill"`, …) are read off the document root (`--positive`, …); `var(--token)` is read off the document root; any
+ * variants `"positive-fill"`, …) are read in the snapshot's inherited scope (`--positive`, …); `var(--token)` uses the same scope; any
  * other CSS colour is normalized like the tokens are. A colour that can't be
  * resolved comes back as `""`, which ECharts treats as "use the palette".
  */
@@ -294,12 +327,13 @@ function resolveChartColors(colors: readonly string[], tokens: ChartTokens | nul
     // Meaning colours are the theme tokens of the same name: same path as `var(--positive)`.
     if (TONE_NAME_RE.test(color.trim())) {
       if (typeof document === "undefined") return ""
-      return toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue(`--${color.trim()}`)) ?? ""
+      const target = (tokens && tokenScopes.get(tokens)) ?? document.documentElement
+      return toCanvasColor(getComputedStyle(target).getPropertyValue(`--${color.trim()}`)) ?? ""
     }
     if (typeof document === "undefined") return color
     let value = color.trim()
     const cssVar = CSS_VAR_RE.exec(value)
-    const styles = getComputedStyle(document.documentElement)
+    const styles = getComputedStyle((tokens && tokenScopes.get(tokens)) ?? document.documentElement)
     if (cssVar) {
       value = styles.getPropertyValue(cssVar[1]!).trim() || (cssVar[2] ?? "").trim()
     } else if (value.includes("var(")) {
@@ -345,7 +379,7 @@ function readChartSurface(el: Element | null): string | null {
       if (color) return color
     }
   }
-  return toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue("--background"))
+  return toCanvasColor(getComputedStyle(el ?? document.documentElement).getPropertyValue("--background"))
 }
 
 /** Widths are bucketed so a resize only rebuilds the option when the label budget can change. */
@@ -359,9 +393,10 @@ const WIDTH_BUCKET = 40
  */
 function useChartSurface<E extends Element>(
   forwarded: ForwardedRef<E>,
-  tokens: ChartTokens | null,
-): { ref: (el: E | null) => void; surface: string | undefined; width: number | undefined } {
+  tokens?: ChartTokens | null,
+): { ref: (el: E | null) => void; surface: string | undefined; width: number | undefined; tokens: ChartTokens | null } {
   const [node, setNode] = useState<E | null>(null)
+  const scopedTokens = useChartTokens(node)
   const [surface, setSurface] = useState<string | undefined>(undefined)
   const [width, setWidth] = useState<number | undefined>(undefined)
   const ref = useCallback(
@@ -375,7 +410,7 @@ function useChartSurface<E extends Element>(
   useEffect(() => {
     if (!node) return
     setSurface(readChartSurface(node) ?? undefined)
-  }, [node, tokens])
+  }, [node, tokens, scopedTokens])
   useEffect(() => {
     if (!node || typeof ResizeObserver === "undefined") return
     const update = (w: number) => setWidth(Math.floor(w / WIDTH_BUCKET) * WIDTH_BUCKET)
@@ -384,7 +419,7 @@ function useChartSurface<E extends Element>(
     observer.observe(node)
     return () => observer.disconnect()
   }, [node])
-  return { ref, surface, width }
+  return { ref, surface, width, tokens: scopedTokens }
 }
 
 /* ---------- inlined from @squadbase/squadkit registry/lib/chart-utils.ts (internal to @squadbase/vantage) ---------- */
@@ -1538,6 +1573,10 @@ const toDate = (t: ParsedTime) => new Date(t.year, t.month - 1, t.day)
 
 /** How many x labels a time axis shows at most (the step is picked so the labels never crowd). */
 const TIME_AXIS_MAX_LABELS = 6
+/** Under this plot width (px) the axis, legend and labels switch to their compact form. */
+const NARROW_PLOT_WIDTH = 400
+/** The most x labels a narrow plot shows (a 262px plot reads 4 at most). */
+const NARROW_TIME_AXIS_MAX_LABELS = 4
 
 /** Calendar-friendly label steps per granularity (every 3 months, every week …). */
 const TIME_AXIS_STEPS: Record<TimeGranularity, readonly number[]> = {
@@ -1983,7 +2022,9 @@ const LEGEND_LINE_BUDGET = 320
 /** How many lines the plain legend takes, estimated from its labels (12px text + 8px dot + gaps). */
 function legendLines(items: readonly string[], plotWidth?: number, reserve = 0): number {
   const width = items.reduce((sum, name) => sum + [...name].length * 12 + 8 + 5 + 16, 0)
-  const budget = Math.max(80, (plotWidth ? Math.min(LEGEND_LINE_BUDGET, plotWidth) : LEGEND_LINE_BUDGET) - reserve)
+  // A narrow plot has no room for the PNG buttons beside the legend: they move off its line, so no reserve.
+  const narrow = plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
+  const budget = Math.max(80, (plotWidth ? (narrow ? plotWidth : Math.min(LEGEND_LINE_BUDGET, plotWidth)) : LEGEND_LINE_BUDGET) - (narrow ? 0 : reserve))
   return Math.min(3, Math.max(1, Math.ceil(width / budget)))
 }
 
@@ -2238,7 +2279,15 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     ? null
     : timeAxisLabelStep(
         rawIndex,
-        plotWidth ? Math.max(2, Math.min(TIME_AXIS_MAX_LABELS, Math.floor(plotWidth / TIME_LABEL_WIDTH))) : undefined,
+        plotWidth
+          ? Math.max(
+              2,
+              Math.min(
+                plotWidth < NARROW_PLOT_WIDTH ? NARROW_TIME_AXIS_MAX_LABELS : TIME_AXIS_MAX_LABELS,
+                Math.floor(plotWidth / TIME_LABEL_WIDTH),
+              ),
+            )
+          : undefined,
       )
   // Plain (non-date) x labels of a line chart: thinned to every n-th so they never touch, never rotated.
   const plainStep = (() => {
@@ -2284,8 +2333,12 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
           : []
   // On a narrow plot the max and the latest label would print over each other: keep the latest.
   const pointGap = plotWidth && labels.length > 1 ? plotWidth / (kind === "bar" ? labels.length : labels.length - 1) : null
+  // By default only the latest value is labelled; an explicit `highlight` keeps its max + latest.
+  const latestOnly = cfg.highlight === undefined && !shareHighlight && picked.length === 2
   const highlightPoints =
-    picked.length === 2 && pointGap !== null && Math.abs(picked[1]!.index - picked[0]!.index) * pointGap < HIGHLIGHT_LABEL_WIDTH
+    latestOnly
+      ? [picked[1]!]
+      : picked.length === 2 && pointGap !== null && Math.abs(picked[1]!.index - picked[0]!.index) * pointGap < HIGHLIGHT_LABEL_WIDTH
       ? [picked[1]!]
       : picked
 
@@ -2496,6 +2549,8 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
           ? { width: 0, color, opacity: 0 }
           : { width: 2, color, opacity: dimSeries ? DIMMED : 1 },
       itemStyle: { color, opacity: dimSeries ? DIMMED : 1 },
+      // Hovering a series fades the others (not for a stack, where the bands read together).
+      emphasis: stacked ? undefined : { focus: "series" as const },
       areaStyle: areaStyle && dimSeries ? { ...areaStyle, opacity: DIMMED * 0.3 } : areaStyle,
       markPoint: markPointFor(c, color),
       markLine: undefined,
@@ -2942,7 +2997,10 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
     legend: {
       show: showLegend,
       top: 0,
-      right: reserveActions ? ACTIONS_RESERVE : 0,
+      // Narrow: left-aligned and wrapping above the plot, so nothing is cut off at the right edge.
+      ...(plotWidth !== undefined && plotWidth < NARROW_PLOT_WIDTH
+        ? { left: 0, right: 0 }
+        : { right: reserveActions ? ACTIONS_RESERVE : 0 }),
       // Plain wraps onto a second line at narrow widths instead of hiding items behind arrows.
       type: "plain",
       icon: "circle",
@@ -3003,7 +3061,12 @@ function buildCartesianOption(cfg: CartesianChartConfig): EChartsOption {
           }
         }
         const shares = percent ? cartesianSeriesValues(i <= lastActual ? [row] : [], categories, "percent") : null
-        for (const p of list) {
+        // Rows follow the legend order (categories first), not ECharts' own series order.
+        const legendRank = (p: AxisTooltipParam) => {
+          const at = categories.indexOf(p.seriesName ?? "")
+          return at === -1 ? categories.length : at
+        }
+        for (const p of [...list].sort((a, b) => legendRank(a) - legendRank(b))) {
           const color = typeof p.color === "string" ? p.color : "currentColor"
           if (p.seriesId === FORECAST_SERIES_ID) {
             // At and before the boundary the forecast repeats the actual value.