gloomberb 0.9.3 → 0.9.5

package/src/components/chart/static/chart/axis-overlays.tsx

@@ -0,0 +1,243 @@
+import { Box, Text, useUiCapabilities, useUiHost } from "../../../../ui";
+
+export interface StaticChartXMarker {
+  id: string;
+  xRatio: number;
+  label?: string;
+  color?: string;
+  lineChar?: string;
+}
+
+export function clampRatio(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(1, value));
+}
+
+function markerColumn(xRatio: number, width: number): number {
+  return Math.round(clampRatio(xRatio) * Math.max(0, width - 1));
+}
+
+function alignAxisLabel(label: string, width: number, index: number, count: number): string {
+  const clipped = label.length > width ? label.slice(0, width) : label;
+  const padding = Math.max(0, width - clipped.length);
+  if (index === 0) return clipped.padEnd(width);
+  if (index === count - 1) return clipped.padStart(width);
+  const left = Math.floor(padding / 2);
+  return `${" ".repeat(left)}${clipped}${" ".repeat(padding - left)}`;
+}
+
+export function StaticXAxisLabels({
+  labels,
+  width,
+  color,
+  cursorColumn,
+  cursorPixelX,
+  cursorLabel,
+  cursorColor,
+  cursorBackgroundColor,
+}: {
+  labels: string[];
+  width: number;
+  color?: string;
+  cursorColumn?: number | null;
+  cursorPixelX?: number | null;
+  cursorLabel?: string | null;
+  cursorColor?: string;
+  cursorBackgroundColor?: string;
+}) {
+  const { cellWidthPx = 8, fractionalViewport = false } = useUiCapabilities();
+  const visibleLabels = labels.filter(Boolean);
+  if (visibleLabels.length === 0 || width <= 0) return null;
+  const baseWidth = Math.floor(width / visibleLabels.length);
+  let remainder = width - baseWidth * visibleLabels.length;
+  const clippedCursorLabel = cursorLabel ? cursorLabel.slice(0, width) : null;
+  const cursorLabelWidth = clippedCursorLabel?.length ?? 0;
+  const usePixelOverlay = fractionalViewport
+    && clippedCursorLabel !== null
+    && cursorPixelX !== null
+    && cursorPixelX !== undefined
+    && Number.isFinite(cursorPixelX)
+    && cursorLabelWidth > 0;
+  const pixelWidth = Math.max(width * cellWidthPx, 1);
+  const halfCursorLabelWidthPx = Math.min((cursorLabelWidth * cellWidthPx) / 2, (pixelWidth - 1) / 2);
+  const cursorLeftPercent = usePixelOverlay
+    ? (
+      Math.max(
+        halfCursorLabelWidthPx,
+        Math.min(cursorPixelX!, Math.max(pixelWidth - halfCursorLabelWidthPx, halfCursorLabelWidthPx)),
+      ) / Math.max(pixelWidth - 1, 1)
+    ) * 100
+    : null;
+  const cursorLeft = cursorColumn !== null
+    && cursorColumn !== undefined
+    && Number.isFinite(cursorColumn)
+    && cursorLabelWidth > 0
+    ? Math.max(0, Math.min(Math.max(0, width - cursorLabelWidth), Math.round(cursorColumn) - Math.floor(cursorLabelWidth / 2)))
+    : null;
+
+  return (
+    <Box
+      width={width}
+      height={1}
+      flexDirection="row"
+      position="relative"
+      overflow="hidden"
+    >
+      <Box width={width} height={1} flexDirection="row">
+        {visibleLabels.map((label, index) => {
+          const cellWidth = baseWidth + (remainder > 0 ? 1 : 0);
+          remainder -= remainder > 0 ? 1 : 0;
+          return (
+            <Box key={`${label}:${index}`} width={cellWidth} overflow="hidden">
+              <Text fg={color}>{alignAxisLabel(label, cellWidth, index, visibleLabels.length)}</Text>
+            </Box>
+          );
+        })}
+      </Box>
+      {clippedCursorLabel && (cursorLeftPercent !== null || cursorLeft !== null) ? (
+        <Text
+          fg={cursorColor}
+          bg={cursorBackgroundColor}
+          selectable={false}
+          style={cursorLeftPercent !== null
+            ? {
+              position: "absolute",
+              left: `${cursorLeftPercent}%`,
+              top: 0,
+              transform: "translateX(-50%)",
+              whiteSpace: "pre",
+              pointerEvents: "none",
+              zIndex: 3,
+            }
+            : {
+              position: "absolute",
+              left: cursorLeft ?? 0,
+              top: 0,
+              whiteSpace: "pre",
+              pointerEvents: "none",
+              zIndex: 3,
+            }}
+        >
+          {clippedCursorLabel}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
+
+export function StaticXMarkerOverlay({
+  markers,
+  width,
+  height,
+  fallbackColor,
+}: {
+  markers: StaticChartXMarker[];
+  width: number;
+  height: number;
+  fallbackColor?: string;
+}) {
+  const uiHost = useUiHost();
+  const visibleMarkers = markers.filter((marker) => Number.isFinite(marker.xRatio));
+  if (visibleMarkers.length === 0 || width <= 0 || height <= 0) return null;
+
+  if (uiHost.kind === "desktop-web") {
+    return (
+      <Box position="absolute" left={0} top={0} width={width} height={height}>
+        {visibleMarkers.map((marker) => (
+          <Box
+            key={marker.id}
+            position="absolute"
+            left={`${clampRatio(marker.xRatio) * 100}%`}
+            top={0}
+            bottom={0}
+            width={0}
+            zIndex={2}
+            style={{
+              width: 1,
+              transform: "translateX(-0.5px)",
+              backgroundColor: marker.color ?? fallbackColor ?? "currentColor",
+              opacity: 0.85,
+              pointerEvents: "none",
+            }}
+          />
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <Box position="absolute" left={0} top={0} width={width} height={height}>
+      {visibleMarkers.map((marker) => {
+        const left = markerColumn(marker.xRatio, width);
+        return (
+          <Box
+            key={marker.id}
+            position="absolute"
+            left={left}
+            top={0}
+            width={1}
+            height={height}
+            flexDirection="column"
+            zIndex={2}
+          >
+            {Array.from({ length: height }, (_, row) => (
+              <Text key={row} fg={marker.color}>
+                {marker.lineChar ?? "│"}
+              </Text>
+            ))}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+export function StaticXMarkerLabels({
+  markers,
+  width,
+  fallbackColor,
+}: {
+  markers: StaticChartXMarker[];
+  width: number;
+  fallbackColor?: string;
+}) {
+  const visibleMarkers = markers
+    .filter((marker) => marker.label && Number.isFinite(marker.xRatio))
+    .sort((left, right) => markerColumn(left.xRatio, width) - markerColumn(right.xRatio, width));
+  if (visibleMarkers.length === 0 || width <= 0) return null;
+
+  let nextAvailableLeft = 0;
+  const placements = visibleMarkers.map((marker) => {
+    const label = marker.label ?? "";
+    const labelWidth = Math.min(label.length, width);
+    const centeredLeft = markerColumn(marker.xRatio, width) - Math.floor(labelWidth / 2);
+    let left = Math.max(0, Math.min(Math.max(0, width - labelWidth), centeredLeft));
+    left = Math.max(left, nextAvailableLeft);
+    if (left + labelWidth > width) {
+      left = Math.max(nextAvailableLeft, width - labelWidth);
+    }
+    nextAvailableLeft = Math.min(width, left + labelWidth + 1);
+    return { marker, label, labelWidth, left };
+  }).filter((placement) => placement.labelWidth > 0 && placement.left < width);
+
+  return (
+    <Box position="relative" width={width} height={1}>
+      {placements.map(({ marker, label, labelWidth, left }) => {
+        return (
+          <Box
+            key={marker.id}
+            position="absolute"
+            left={left}
+            top={0}
+            width={labelWidth}
+            height={1}
+            overflow="hidden"
+            zIndex={2}
+          >
+            <Text fg={marker.color ?? fallbackColor}>{label.slice(0, labelWidth)}</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/components/chart/static/chart/bitmap.ts

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useNativeRenderer, useUiCapabilities } from "../../../../ui";
-import { computeBitmapSize } from "../../native/chart-rasterizer";
+import { resolveNativeBitmapSize, shouldRenderNativeBitmap } from "../../native/bitmap-support";
 
 export interface StaticChartBitmapSize {
   pixelWidth: number;
@@ -16,20 +16,25 @@ export function useStaticChartBitmapSize(width: number, height: number): StaticC
     pixelRatio = 1,
   } = useUiCapabilities();
   const nativeRenderer = useNativeRenderer();
+  const rendererCapabilities = nativeRenderer.capabilities;
   const rendererResolution = nativeRenderer.resolution;
   const rendererTerminalWidth = nativeRenderer.terminalWidth;
   const rendererTerminalHeight = nativeRenderer.terminalHeight;
 
   return useMemo(() => {
-    if (nativeCharts && rendererResolution && rendererTerminalWidth > 0 && rendererTerminalHeight > 0) {
-      return computeBitmapSize(
-        { x: 0, y: 0, width, height },
-        rendererResolution,
-        rendererTerminalWidth,
-        rendererTerminalHeight,
-      );
+    if (shouldRenderNativeBitmap(nativeRenderer, nativeCharts === true)) {
+      return resolveNativeBitmapSize({
+        width,
+        height,
+        resolution: rendererResolution,
+        terminalWidth: rendererTerminalWidth,
+        terminalHeight: rendererTerminalHeight,
+        cellWidthPx,
+        cellHeightPx,
+        pixelRatio,
+      });
     }
-    if (!canvasCharts && !nativeCharts) return null;
+    if (!canvasCharts) return null;
     const scale = Math.max(1, pixelRatio);
     return {
       pixelWidth: Math.max(1, Math.round(width * cellWidthPx * scale)),
@@ -41,7 +46,9 @@ export function useStaticChartBitmapSize(width: number, height: number): StaticC
     cellWidthPx,
     height,
     nativeCharts,
+    nativeRenderer,
     pixelRatio,
+    rendererCapabilities,
     rendererResolution,
     rendererTerminalHeight,
     rendererTerminalWidth,

package/src/components/chart/static/chart/surface.test.tsx

@@ -48,4 +48,96 @@ describe("StaticChartSurface", () => {
     expect(frame).toContain("4.90%");
     expect(frame).toContain("3.50%");
   });
+
+  test("renders custom x-axis scale labels", async () => {
+    testSetup = await testRender(
+      <StaticChartSurface
+        points={points}
+        width={48}
+        height={10}
+        mode="line"
+        colors={resolveChartPalette(colors, "positive")}
+        xAxisLabels={["0%", "50%", "100%"]}
+        xAxisColor={colors.textDim}
+      />,
+      { width: 50, height: 12 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("0%");
+    expect(frame).toContain("50%");
+    expect(frame).toContain("100%");
+  });
+
+  test("renders x-axis decision markers", async () => {
+    testSetup = await testRender(
+      <StaticChartSurface
+        points={points}
+        width={56}
+        height={10}
+        mode="line"
+        colors={resolveChartPalette(colors, "positive")}
+        xAxisLabels={["0%", "50%", "100%"]}
+        xMarkers={[
+          { id: "current", xRatio: 0.1, label: "current", lineChar: "┊" },
+          { id: "target", xRatio: 0.5, label: "target", lineChar: "┃" },
+          { id: "full", xRatio: 0.8, label: "full", lineChar: "│" },
+        ]}
+        xAxisColor={colors.textDim}
+      />,
+      { width: 58, height: 12 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("current");
+    expect(frame).toContain("target");
+    expect(frame).toContain("full");
+    expect(frame).toContain("┃");
+  });
+
+  test("renders a cursor crosshair after mouse movement", async () => {
+    testSetup = await testRender(
+      <StaticChartSurface
+        points={points}
+        width={48}
+        height={10}
+        mode="line"
+        colors={resolveChartPalette(colors, "positive")}
+        xAxisLabels={["0%", "50%", "100%"]}
+        formatXAxisCursorValue={(ratio) => `X${Math.round(ratio * 100)}`}
+        formatYAxisValue={(value) => `Y${value.toFixed(2)}`}
+        xMarkers={[
+          { id: "current", xRatio: 0.1, label: "current", lineChar: "┊" },
+          { id: "target", xRatio: 0.5, label: "target", lineChar: "┃" },
+        ]}
+      />,
+      { width: 50, height: 12 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    const initialFrame = testSetup.captureCharFrame();
+
+    await act(async () => {
+      await testSetup!.mockMouse.moveTo(20, 4);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(testSetup.captureCharFrame()).not.toBe(initialFrame);
+    expect(testSetup.captureCharFrame()).toContain("X49");
+    expect(testSetup.captureCharFrame()).toContain("Y3.97");
+  });
 });

package/src/components/chart/static/chart/surface.tsx

@@ -1,16 +1,26 @@
-import { useMemo } from "react";
-import { Box, ChartSurface, Text } from "../../../../ui";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Box, ChartSurface, Text, type BoxRenderable, type ChartSurfaceProps, useUiCapabilities } from "../../../../ui";
+import { colors as themeColors } from "../../../../theme/colors";
 import { useThemeColors } from "../../../../theme/theme-context";
+import { PriceAxisLabels } from "../../price-axis-labels";
 import type { ProjectedChartPoint } from "../../core/data";
 import {
   buildChartScene,
   computeGridLines,
-  formatAxisCell,
   renderChart,
   type RenderChartOptions,
 } from "../../core/renderer";
 import { renderNativeChartBase, type NativeChartBitmap } from "../../native/chart-rasterizer";
 import { useStaticChartBitmapSize } from "./bitmap";
+import {
+  StaticXAxisLabels,
+  StaticXMarkerLabels,
+  StaticXMarkerOverlay,
+  clampRatio,
+  type StaticChartXMarker,
+} from "./axis-overlays";
+
+export type { StaticChartXMarker } from "./axis-overlays";
 
 export interface StaticChartSurfaceProps extends Omit<
   RenderChartOptions,
@@ -23,11 +33,52 @@ export interface StaticChartSurfaceProps extends Omit<
   volumeHeight?: number;
   showTimeAxis?: boolean;
   timeAxisColor?: string;
+  xAxisLabels?: string[];
+  xAxisColor?: string;
+  formatXAxisCursorValue?: (xRatio: number) => string;
+  xMarkers?: StaticChartXMarker[];
   yAxisLabel?: string;
   yAxisColor?: string;
   formatYAxisValue?: (value: number) => string;
 }
 
+interface ChartMouseEventLike {
+  x: number;
+  y: number;
+  preciseX?: number;
+  preciseY?: number;
+  preventDefault?: () => void;
+}
+
+function localPlotPointer(
+  event: ChartMouseEventLike,
+  renderable: BoxRenderable | null,
+): { x: number; y: number } | null {
+  if (!renderable) return null;
+  const originX = typeof renderable.absoluteX === "number"
+    ? renderable.absoluteX
+    : typeof renderable.x === "number"
+      ? renderable.x
+      : 0;
+  const originY = typeof renderable.absoluteY === "number"
+    ? renderable.absoluteY
+    : typeof renderable.y === "number"
+      ? renderable.y
+      : 0;
+  const rawX = typeof event.preciseX === "number" ? event.preciseX : event.x;
+  const rawY = typeof event.preciseY === "number" ? event.preciseY : event.y;
+  const x = rawX - originX;
+  const y = rawY - originY;
+  const width = typeof renderable.width === "number" ? renderable.width : 0;
+  const height = typeof renderable.height === "number" ? renderable.height : 0;
+  if (!Number.isFinite(x) || !Number.isFinite(y) || width <= 0 || height <= 0) return null;
+  if (x < 0 || y < 0 || x >= width || y >= height) return null;
+  return {
+    x: Math.max(0, Math.min(x, Math.max(width - 1, 0))),
+    y: Math.max(0, Math.min(y, Math.max(height - 1, 0))),
+  };
+}
+
 export function StaticChartSurface({
   points,
   width,
@@ -43,16 +94,24 @@ export function StaticChartSurface({
   volumeHeight = 0,
   showTimeAxis = false,
   timeAxisColor,
+  xAxisLabels,
+  xAxisColor,
+  formatXAxisCursorValue,
+  xMarkers,
   yAxisLabel,
   yAxisColor,
   formatYAxisValue,
 }: StaticChartSurfaceProps) {
   useThemeColors();
-  const timeAxisRows = showTimeAxis ? 1 : 0;
+  const { cellWidthPx = 8, cellHeightPx = 18 } = useUiCapabilities();
+  const plotRef = useRef<BoxRenderable | null>(null);
+  const [cursor, setCursor] = useState<{ x: number; y: number } | null>(null);
+  const xAxisRows = showTimeAxis || (xAxisLabels?.length ?? 0) > 0 ? 1 : 0;
+  const xMarkerRows = xMarkers?.some((marker) => marker.label) ? 1 : 0;
   const labelRows = yAxisLabel ? 1 : 0;
   const totalWidth = Math.max(1, Math.floor(width));
   const totalHeight = Math.max(1, Math.floor(height));
-  const plotHeight = Math.max(1, totalHeight - timeAxisRows - labelRows);
+  const plotHeight = Math.max(1, totalHeight - xAxisRows - xMarkerRows - labelRows);
   const axisSourceOptions = useMemo<RenderChartOptions>(() => ({
     width: totalWidth,
     height: plotHeight,
@@ -104,8 +163,8 @@ export function StaticChartSurface({
     height: plotHeight,
     showVolume,
     volumeHeight,
-    cursorX: null,
-    cursorY: null,
+    cursorX: cursor?.x ?? null,
+    cursorY: cursor?.y ?? null,
     mode,
     axisMode,
     currency,
@@ -122,6 +181,7 @@ export function StaticChartSurface({
     mode,
     plotHeight,
     plotWidth,
+    cursor,
     showVolume,
     timeAxisDates,
     volumeHeight,
@@ -133,6 +193,14 @@ export function StaticChartSurface({
   const effectiveAxisLabelsByRow = useMemo(() => {
     return new Map(axisLabels.map((entry) => [entry.row, entry.label] as const));
   }, [axisLabels]);
+  const cursorAxisLabel = useMemo(() => {
+    if (!formatYAxisValue || textResult.crosshairPrice === null) return null;
+    return formatYAxisValue(textResult.crosshairPrice);
+  }, [formatYAxisValue, textResult.crosshairPrice]);
+  const cursorXAxisLabel = useMemo(() => {
+    if (!formatXAxisCursorValue || !cursor) return null;
+    return formatXAxisCursorValue(clampRatio(cursor.x / Math.max(plotWidth - 1, 1)));
+  }, [cursor, formatXAxisCursorValue, plotWidth]);
   const effectiveAxisWidth = axisWidth;
   const effectiveAxisGap = effectiveAxisWidth > 0 ? 1 : 0;
   const bitmap = useMemo<NativeChartBitmap | null>(() => {
@@ -141,40 +209,115 @@ export function StaticChartSurface({
     if (!scene) return null;
     return renderNativeChartBase(scene, bitmapSize.pixelWidth, bitmapSize.pixelHeight);
   }, [bitmapSize, points, renderOptions]);
+  const canvasCrosshair = useMemo<ChartSurfaceProps["crosshair"]>(() => {
+    if (!bitmap || !cursor) return null;
+    return {
+      pixelX: Math.round(clampRatio(cursor.x / Math.max(plotWidth - 1, 1)) * Math.max(bitmap.width - 1, 0)),
+      pixelY: Math.round(clampRatio(cursor.y / Math.max(plotHeight - 1, 1)) * Math.max(bitmap.height - 1, 0)),
+      color: colors.crosshairColor,
+    };
+  }, [bitmap, colors.crosshairColor, cursor, plotHeight, plotWidth]);
+  const handleCursorEvent = useCallback((event: ChartMouseEventLike) => {
+    const pointer = localPlotPointer(event, plotRef.current);
+    if (!pointer) return;
+    event.preventDefault?.();
+    setCursor((current) => (
+      current && current.x === pointer.x && current.y === pointer.y ? current : pointer
+    ));
+  }, []);
+  const clearCursor = useCallback(() => {
+    setCursor(null);
+  }, []);
 
   return (
-    <Box flexDirection="column" width={totalWidth} height={plotHeight + timeAxisRows + labelRows}>
+    <Box flexDirection="column" width={totalWidth} height={plotHeight + xAxisRows + xMarkerRows + labelRows}>
       {yAxisLabel ? (
         <Box height={1}>
           <Text fg={yAxisColor}>{yAxisLabel}</Text>
         </Box>
       ) : null}
       <Box flexDirection="row" height={plotHeight}>
-        <ChartSurface
+        <Box
+          ref={plotRef}
+          position="relative"
           width={plotWidth}
           height={plotHeight}
-          flexDirection="column"
-          bitmaps={bitmap ? [bitmap] : null}
+          onMouseMove={handleCursorEvent}
+          onMouseDown={handleCursorEvent}
+          onMouseOut={clearCursor}
+          data-gloom-role="static-chart-plot"
         >
-          {textResult.lines.map((line, index) => (
-            <Text key={index} content={line} />
-          ))}
-        </ChartSurface>
+          <ChartSurface
+            width={plotWidth}
+            height={plotHeight}
+            flexDirection="column"
+            bitmaps={bitmap ? [bitmap] : null}
+            crosshair={canvasCrosshair}
+          >
+            {textResult.lines.map((line, index) => (
+              <Text key={index} content={line} />
+            ))}
+          </ChartSurface>
+          {xMarkers ? (
+            <StaticXMarkerOverlay
+              markers={xMarkers}
+              width={plotWidth}
+              height={plotHeight}
+              fallbackColor={xAxisColor ?? timeAxisColor}
+            />
+          ) : null}
+        </Box>
         {effectiveAxisWidth > 0 ? (
           <>
             <Box width={effectiveAxisGap} />
-            <Box width={effectiveAxisWidth} height={plotHeight} flexDirection="column">
-              {Array.from({ length: plotHeight }, (_, row) => (
-                <Text key={row} fg={yAxisColor}>
-                  {formatAxisCell(effectiveAxisLabelsByRow.get(row) ?? null, effectiveAxisWidth)}
-                </Text>
-              ))}
-            </Box>
+            <PriceAxisLabels
+              axisLabels={effectiveAxisLabelsByRow}
+              axisWidth={effectiveAxisWidth}
+              axisSectionWidth={effectiveAxisWidth}
+              height={plotHeight}
+              cursorRow={textResult.cursorRow}
+              cursorPixelY={cursor ? cursor.y * cellHeightPx : null}
+              cursorLabel={cursorAxisLabel}
+              cursorColor={colors.crosshairColor}
+              axisColor={yAxisColor}
+            />
           </>
         ) : null}
       </Box>
-      {showTimeAxis ? (
-        <Text fg={timeAxisColor}>{textResult.timeLabels}</Text>
+      {showTimeAxis || (xAxisLabels?.length ?? 0) > 0 ? (
+        <Box height={1} flexDirection="row">
+          {xAxisLabels ? (
+            <StaticXAxisLabels
+              labels={xAxisLabels}
+              width={plotWidth}
+              color={xAxisColor ?? timeAxisColor}
+              cursorColumn={textResult.cursorColumn}
+              cursorPixelX={cursor ? cursor.x * cellWidthPx : null}
+              cursorLabel={cursorXAxisLabel}
+              cursorColor={colors.crosshairColor}
+              cursorBackgroundColor={colors.bgColor ?? themeColors.bg}
+            />
+          ) : (
+            <Text fg={timeAxisColor}>{textResult.timeLabels}</Text>
+          )}
+          {effectiveAxisWidth > 0 ? (
+            <>
+              <Box width={effectiveAxisGap} />
+              <Box width={effectiveAxisWidth} />
+            </>
+          ) : null}
+        </Box>
+      ) : null}
+      {xMarkers && xMarkerRows > 0 ? (
+        <Box height={1} flexDirection="row">
+          <StaticXMarkerLabels markers={xMarkers} width={plotWidth} fallbackColor={xAxisColor ?? timeAxisColor} />
+          {effectiveAxisWidth > 0 ? (
+            <>
+              <Box width={effectiveAxisGap} />
+              <Box width={effectiveAxisWidth} />
+            </>
+          ) : null}
+        </Box>
       ) : null}
     </Box>
   );

package/src/components/chart/stock-chart/index.test.ts

@@ -76,6 +76,31 @@ describe("stock chart pointer helpers", () => {
     });
   });
 
+  test("uses absolute renderable coordinates for desktop mouse hit testing", () => {
+    const pointer = getLocalPlotPointer({
+      x: 49,
+      y: 10,
+      preciseX: 49.5,
+      preciseY: 10.25,
+      modifiers: { shift: false, alt: false, ctrl: false },
+    }, {
+      x: 0,
+      y: 0,
+      absoluteX: 10,
+      absoluteY: 5,
+      width: 40,
+      height: 12,
+    }, renderer);
+
+    expect(pointer).toMatchObject({
+      hasPixelPrecision: false,
+      pixelX: null,
+      pixelY: null,
+    });
+    expect(pointer!.cellX).toBeCloseTo(39.5, 2);
+    expect(pointer!.cellY).toBeCloseTo(5.25, 2);
+  });
+
   test("can derive local pixels from cell coordinates for non-pixel fallbacks", () => {
     const pixels = projectCellCursorToLocalPixels(14, 5, renderable, renderer);