fix(origin): thin x-axis labels by measured width (#28120)

## Summary
- Use Origin's existing measured label width helper to choose x-axis
label density
- Omit edge x-axis labels after thinning to avoid boundary crowding
- Preserve existing Origin chart styling and public APIs

## Checks
- yarn workspace @lightsparkdev/origin types
- yarn workspace @lightsparkdev/origin format
- git diff --check -- js/packages/origin/src/components/Chart

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
GitOrigin-RevId: 76b97cdca1ffd1d681593c61dc43aaaef530a61a

Author: 2 people

packages/origin/src/components/Chart/BarChart.tsx

@@ -7,6 +7,8 @@ import {
   niceTicks,
   thinIndices,
   dynamicTickTarget,
+  xAxisTickTarget,
+  applyEdgeLabels,
   measureLabelWidth,
   axisPadForLabels,
   formatChartDatumValue,
@@ -30,6 +32,7 @@ import {
   resolveSeries,
   resolveTooltipMode,
   axisTickTarget,
+  type XAxisLabelProps,
 } from "./types";
 import { ChartWrapper } from "./ChartWrapper";
 import { useTrackedCallback } from "../Analytics/useTrackedCallback";
@@ -39,7 +42,9 @@ const EMPTY_TICKS = { min: 0, max: 1, ticks: [0, 1] } as const;
 
 const clickIndexMeta = (index: number) => ({ index });
 
-export interface BarChartProps extends React.ComponentPropsWithoutRef<"div"> {
+export interface BarChartProps
+  extends React.ComponentPropsWithoutRef<"div">,
+    XAxisLabelProps {
   data: ChartDatum[];
   /**
    * Pre-measurement width in pixels. Used as a fallback before
@@ -65,6 +70,22 @@ export interface BarChartProps extends React.ComponentPropsWithoutRef<"div"> {
   formatValue?: (value: number) => string;
   formatXLabel?: (value: ChartDatumValue) => string;
   formatYLabel?: (value: number) => string;
+  /**
+   * How vertical-bar x-axis (category) labels are thinned to avoid overlap.
+   * Has no effect on horizontal bar charts.
+   * - `"fixed"` (default): roughly one label per 60px, regardless of width.
+   * - `"measured"`: spacing based on the measured pixel width of the labels,
+   *   so wide labels (dates, currency) get more room and short labels pack in.
+   */
+  xAxisLabels?: "fixed" | "measured";
+  /**
+   * Whether the first and last x-axis (category) labels are shown on vertical
+   * bar charts. Has no effect on horizontal bar charts.
+   * - `"show"` (default): keep the edge labels.
+   * - `"hide"`: drop the first and last labels (useful when they collide with
+   *   the y-axis or chart edges).
+   */
+  xAxisEdgeLabels?: "show" | "hide";
   /** Fixed Y-axis domain. Overrides auto-computed domain from data. */
   yDomain?: [number, number];
   /** Show legend below chart. */
@@ -111,6 +132,8 @@ export const Bar = React.forwardRef<HTMLDivElement, BarChartProps>(function Bar(
     formatValue,
     formatXLabel,
     formatYLabel,
+    xAxisLabels = "fixed",
+    xAxisEdgeLabels = "show",
     yDomain,
     legend,
     loading,
@@ -234,6 +257,30 @@ export const Bar = React.forwardRef<HTMLDivElement, BarChartProps>(function Bar(
   const padRight = isHorizontal && showValueAxis ? 40 : PAD_RIGHT;
   const plotWidth = Math.max(0, width - padLeft - padRight);
 
+  const categoryAxisLabels = React.useMemo(() => {
+    if (!xKey) return [];
+    const labels = data.map((d) =>
+      formatXLabel ? formatXLabel(d[xKey]) : formatChartDatumValue(d[xKey]),
+    );
+    const maxLabels = isHorizontal
+      ? Math.max(2, Math.floor(plotHeight / 24))
+      : xAxisTickTarget(xAxisLabels, plotWidth, () => labels);
+    const indices = thinIndices(data.length, maxLabels);
+    const visibleIndices = isHorizontal
+      ? indices
+      : applyEdgeLabels(xAxisEdgeLabels, indices);
+    return visibleIndices.map((index) => ({ index, label: labels[index] }));
+  }, [
+    data,
+    formatXLabel,
+    isHorizontal,
+    plotHeight,
+    plotWidth,
+    xKey,
+    xAxisLabels,
+    xAxisEdgeLabels,
+  ]);
+
   const tickTarget = React.useMemo(() => {
     if (!isHorizontal) return verticalTickTarget;
     const fmt = formatYLabel ?? ((v: number) => String(v));
@@ -915,11 +962,7 @@ export const Bar = React.forwardRef<HTMLDivElement, BarChartProps>(function Bar(
                 {/* Category axis labels (thinned to avoid overlap) */}
                 {xKey &&
                   (() => {
-                    const maxLabels = isHorizontal
-                      ? Math.max(2, Math.floor(plotHeight / 24))
-                      : Math.max(2, Math.floor(plotWidth / 60));
-                    const indices = thinIndices(data.length, maxLabels);
-                    return indices.map((i) =>
+                    return categoryAxisLabels.map(({ index: i, label }) =>
                       isHorizontal ? (
                         <text
                           key={i}
@@ -929,9 +972,7 @@ export const Bar = React.forwardRef<HTMLDivElement, BarChartProps>(function Bar(
                           textAnchor="end"
                           dominantBaseline="middle"
                         >
-                          {formatXLabel
-                            ? formatXLabel(data[i][xKey])
-                            : formatChartDatumValue(data[i][xKey])}
+                          {label}
                         </text>
                       ) : (
                         <text
@@ -942,9 +983,7 @@ export const Bar = React.forwardRef<HTMLDivElement, BarChartProps>(function Bar(
                           textAnchor="middle"
                           dominantBaseline="auto"
                         >
-                          {formatXLabel
-                            ? formatXLabel(data[i][xKey])
-                            : formatChartDatumValue(data[i][xKey])}
+                          {label}
                         </text>
                       ),
                     );

packages/origin/src/components/Chart/Chart.unit.test.ts

@@ -21,6 +21,9 @@ import {
   thinIndices,
   measureLabelWidth,
   dynamicTickTarget,
+  xAxisTickTarget,
+  omitEdgeLabels,
+  applyEdgeLabels,
   axisPadForLabels,
   formatChartDatumValue,
   type Point,
@@ -736,6 +739,60 @@ describe("dynamicTickTarget", () => {
   });
 });
 
+// ---------------------------------------------------------------------------
+// xAxisTickTarget
+// ---------------------------------------------------------------------------
+
+describe("xAxisTickTarget", () => {
+  it("uses fixed 60px spacing in 'fixed' mode, ignoring label width", () => {
+    expect(xAxisTickTarget("fixed", 300, () => ["$1,234,567.00"])).toBe(5);
+    expect(xAxisTickTarget("fixed", 600, () => ["0"])).toBe(10);
+  });
+
+  it("does not evaluate the sample texts in 'fixed' mode", () => {
+    let called = false;
+    xAxisTickTarget("fixed", 400, () => {
+      called = true;
+      return ["whatever"];
+    });
+    expect(called).toBe(false);
+  });
+
+  it("measures the sample texts in 'measured' mode", () => {
+    const shortLabels = xAxisTickTarget("measured", 400, () => ["0", "100"]);
+    const longLabels = xAxisTickTarget("measured", 400, () => [
+      "$1,234,567.00",
+    ]);
+    expect(shortLabels).toBeGreaterThan(longLabels);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// omitEdgeLabels / applyEdgeLabels
+// ---------------------------------------------------------------------------
+
+describe("omitEdgeLabels", () => {
+  it("drops the first and last entry when there are more than two", () => {
+    expect(omitEdgeLabels([0, 1, 2, 3])).toEqual([1, 2]);
+  });
+
+  it("keeps the list unchanged at two or fewer entries", () => {
+    expect(omitEdgeLabels([0, 1])).toEqual([0, 1]);
+    expect(omitEdgeLabels([0])).toEqual([0]);
+    expect(omitEdgeLabels([])).toEqual([]);
+  });
+});
+
+describe("applyEdgeLabels", () => {
+  it("drops the edge entries in 'hide' mode", () => {
+    expect(applyEdgeLabels("hide", [0, 1, 2, 3])).toEqual([1, 2]);
+  });
+
+  it("returns the list unchanged in 'show' mode", () => {
+    expect(applyEdgeLabels("show", [0, 1, 2, 3])).toEqual([0, 1, 2, 3]);
+  });
+});
+
 // ---------------------------------------------------------------------------
 // axisPadForLabels
 // ---------------------------------------------------------------------------

packages/origin/src/components/Chart/ComposedChart.tsx

@@ -12,6 +12,8 @@ import {
   monotoneInterpolator,
   linearInterpolator,
   thinIndices,
+  xAxisTickTarget,
+  applyEdgeLabels,
   axisPadForLabels,
   formatChartDatumValue,
   type Point,
@@ -36,6 +38,7 @@ import {
   BAR_ITEM_GAP,
   resolveTooltipMode,
   axisTickTarget,
+  type XAxisLabelProps,
 } from "./types";
 import { ChartWrapper } from "./ChartWrapper";
 import styles from "./Chart.module.scss";
@@ -57,7 +60,8 @@ type ResolvedComposedSeries = {
 };
 
 export interface ComposedChartProps
-  extends React.ComponentPropsWithoutRef<"div"> {
+  extends React.ComponentPropsWithoutRef<"div">,
+    XAxisLabelProps {
   data: ChartDatum[];
   /**
    * Pre-measurement width in pixels. Used as a fallback before
@@ -131,6 +135,8 @@ export const Composed = React.forwardRef<HTMLDivElement, ComposedChartProps>(
       formatValue,
       formatXLabel,
       formatYLabel,
+      xAxisLabels = "fixed",
+      xAxisEdgeLabels = "show",
       formatYLabelRight,
       connectNulls = true,
       yDomain: yDomainProp,
@@ -373,6 +379,30 @@ export const Composed = React.forwardRef<HTMLDivElement, ComposedChartProps>(
       trackedClick(scrub.activeIndex, data[scrub.activeIndex]);
     }, [onClickDatum, trackedClick, scrub.activeIndex, data]);
 
+    // X axis labels (thinned to avoid overlap)
+    const xLabels = React.useMemo(() => {
+      if (!xKey) return [];
+      const labels = data.map((d) =>
+        formatXLabel ? formatXLabel(d[xKey]) : formatChartDatumValue(d[xKey]),
+      );
+      const maxLabels = xAxisTickTarget(xAxisLabels, plotWidth, () => labels);
+      const indices = thinIndices(data.length, maxLabels);
+      const visibleIndices = applyEdgeLabels(xAxisEdgeLabels, indices);
+      return visibleIndices.map((i) => ({
+        x: (i + 0.5) * slotWidth,
+        text: labels[i],
+        index: i,
+      }));
+    }, [
+      xKey,
+      data,
+      formatXLabel,
+      xAxisLabels,
+      xAxisEdgeLabels,
+      plotWidth,
+      slotWidth,
+    ]);
+
     const svgDesc = React.useMemo(() => {
       if (series.length === 0 || data.length === 0) return undefined;
       const names = series.map((s) => s.label).join(", ");
@@ -689,25 +719,18 @@ export const Composed = React.forwardRef<HTMLDivElement, ComposedChartProps>(
                   ))}
 
                   {/* X axis labels (thinned to avoid overlap) */}
-                  {xKey &&
-                    (() => {
-                      const maxLabels = Math.max(2, Math.floor(plotWidth / 60));
-                      const indices = thinIndices(data.length, maxLabels);
-                      return indices.map((i) => (
-                        <text
-                          key={i}
-                          x={(i + 0.5) * slotWidth}
-                          y={plotHeight + 20}
-                          className={styles.axisLabel}
-                          textAnchor="middle"
-                          dominantBaseline="auto"
-                        >
-                          {formatXLabel
-                            ? formatXLabel(data[i][xKey])
-                            : formatChartDatumValue(data[i][xKey])}
-                        </text>
-                      ));
-                    })()}
+                  {xLabels.map(({ x, text, index }) => (
+                    <text
+                      key={index}
+                      x={x}
+                      y={plotHeight + 20}
+                      className={styles.axisLabel}
+                      textAnchor="middle"
+                      dominantBaseline="auto"
+                    >
+                      {text}
+                    </text>
+                  ))}
                 </g>
               </svg>
 

packages/origin/src/components/Chart/LineChart.tsx

@@ -12,6 +12,8 @@ import {
   monotoneInterpolator,
   linearInterpolator,
   thinIndices,
+  xAxisTickTarget,
+  applyEdgeLabels,
   axisPadForLabels,
   formatChartDatumValue,
   type Point,
@@ -34,6 +36,7 @@ import {
   resolveTooltipMode,
   resolveSeries,
   axisTickTarget,
+  type XAxisLabelProps,
 } from "./types";
 import { ChartWrapper } from "./ChartWrapper";
 import styles from "./Chart.module.scss";
@@ -42,7 +45,9 @@ export type { Series, TooltipProp, ReferenceLine, ReferenceBand };
 
 const clickIndexMeta = (index: number) => ({ index });
 
-export interface LineChartProps extends React.ComponentPropsWithoutRef<"div"> {
+export interface LineChartProps
+  extends React.ComponentPropsWithoutRef<"div">,
+    XAxisLabelProps {
   /**
    * Array of data objects. Each object should contain keys matching `dataKey` or `series[].key`.
    */
@@ -154,6 +159,8 @@ export const Line = React.forwardRef<HTMLDivElement, LineChartProps>(
       formatValue,
       formatXLabel,
       formatYLabel,
+      xAxisLabels = "fixed",
+      xAxisEdgeLabels = "show",
       connectNulls = true,
       initialWidth,
       className,
@@ -394,20 +401,22 @@ export const Line = React.forwardRef<HTMLDivElement, LineChartProps>(
     // X axis labels
     const xLabels = React.useMemo(() => {
       if (!xKey || data.length === 0 || plotWidth <= 0) return [];
-      const maxLabels = Math.max(2, Math.floor(plotWidth / 60));
+      const labels = data.map((d) => {
+        const raw = d[xKey];
+        return formatXLabel ? formatXLabel(raw) : formatChartDatumValue(raw);
+      });
+      const maxLabels = xAxisTickTarget(xAxisLabels, plotWidth, () => labels);
       const indices = thinIndices(data.length, maxLabels);
-      return indices.map((i) => {
+      const xLabels = indices.map((i) => {
         const x =
           data.length === 1
             ? plotWidth / 2
             : (i / (data.length - 1)) * plotWidth;
-        const raw = data[i][xKey];
-        const text = formatXLabel
-          ? formatXLabel(raw)
-          : formatChartDatumValue(raw);
+        const text = labels[i];
         return { x, text, index: i };
       });
-    }, [xKey, data, plotWidth, formatXLabel]);
+      return applyEdgeLabels(xAxisEdgeLabels, xLabels);
+    }, [xKey, data, plotWidth, formatXLabel, xAxisLabels, xAxisEdgeLabels]);
 
     // Y axis labels
     const yLabels = React.useMemo(() => {
@@ -899,9 +908,9 @@ export const Line = React.forwardRef<HTMLDivElement, LineChartProps>(
                       y={plotHeight + 20}
                       className={styles.axisLabel}
                       textAnchor={
-                        i === 0
+                        labelIndex === 0
                           ? "start"
-                          : i === xLabels.length - 1
+                          : labelIndex === data.length - 1
                           ? "end"
                           : "middle"
                       }