gloomberb 0.4.0 → 0.5.0

package/src/components/chart/chart-scroll.ts

@@ -0,0 +1,104 @@
+import { clearActivePreset } from "./chart-controller";
+import type { TimeRange } from "./chart-types";
+
+export type ChartScrollDirection = "up" | "down" | "left" | "right";
+
+const KEYBOARD_PAN_WIDTH_RATIO = 0.02;
+const SCROLL_PAN_WIDTH_RATIO = 0.005;
+const DRAG_PAN_VISIBLE_RATIO = 0.2;
+
+interface BufferExpansionViewState {
+  activePreset: TimeRange | null;
+  bufferRange: TimeRange;
+}
+
+export interface ScrollPanCellDelta {
+  cells: number;
+  remainder: number;
+}
+
+export interface ScrollPanMovement extends ScrollPanCellDelta {
+  ratio: number;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function getKeyboardPanCellCount(chartWidth: number): number {
+  return Math.max(Math.round(chartWidth * KEYBOARD_PAN_WIDTH_RATIO), 1);
+}
+
+export function getDragPanPointDelta(deltaCells: number, chartWidth: number, visibleCount: number): number {
+  return Math.round((deltaCells / Math.max(chartWidth, 1)) * Math.max(visibleCount, 1) * DRAG_PAN_VISIBLE_RATIO);
+}
+
+export function getDragPanWindowRatio(deltaCells: number, chartWidth: number): number {
+  return (deltaCells / Math.max(chartWidth, 1)) * DRAG_PAN_VISIBLE_RATIO;
+}
+
+export function resolveDragPanOffset(
+  startPanOffset: number,
+  deltaCells: number,
+  chartWidth: number,
+  visibleCount: number,
+  maxPanOffset: number,
+): number {
+  return clamp(
+    startPanOffset - getDragPanPointDelta(deltaCells, chartWidth, visibleCount),
+    0,
+    Math.max(maxPanOffset, 0),
+  );
+}
+
+export function consumeScrollPanCellDelta(
+  chartWidth: number,
+  delta: number | undefined,
+  direction: 1 | -1,
+  remainder: number,
+): ScrollPanCellDelta {
+  const rawMagnitude = Math.abs(delta ?? 1);
+  const magnitude = rawMagnitude > 0 ? rawMagnitude : 1;
+  const next = remainder + direction * Math.max(chartWidth, 1) * SCROLL_PAN_WIDTH_RATIO * magnitude;
+  const rawCells = next >= 0 ? Math.floor(next) : Math.ceil(next);
+  const cells = Object.is(rawCells, -0) ? 0 : rawCells;
+  return {
+    cells,
+    remainder: next - cells,
+  };
+}
+
+export function consumeScrollPanMovement(
+  chartWidth: number,
+  delta: number | undefined,
+  scrollDirection: ChartScrollDirection,
+  remainder: number,
+): ScrollPanMovement {
+  const panDirection = resolveHorizontalScrollPanDirection(scrollDirection);
+  const result = consumeScrollPanCellDelta(chartWidth, delta, panDirection, remainder);
+  return {
+    ...result,
+    ratio: result.cells / Math.max(chartWidth, 1),
+  };
+}
+
+export function applyBufferedPanExpansion<S extends BufferExpansionViewState>(
+  view: S,
+  nextBufferRange: TimeRange,
+): S {
+  return {
+    ...clearActivePreset(view),
+    bufferRange: nextBufferRange,
+  };
+}
+
+export function resolveHorizontalScrollPanDirection(direction: ChartScrollDirection): 1 | -1 {
+  switch (direction) {
+    case "up":
+    case "left":
+      return 1;
+    case "down":
+    case "right":
+      return -1;
+  }
+}

package/src/components/chart/chart-types.ts

@@ -88,3 +88,15 @@ export interface ComparisonChartViewState {
   renderMode?: ComparisonChartRenderMode;
   selectedSymbol: string | null;
 }
+
+import type { IndicatorConfig, OverlayPoint, OscillatorPoint, MacdResult, BollingerResult } from "./indicators/types";
+
+export interface ChartIndicatorOverlays {
+  smaLines: { period: number; points: OverlayPoint[]; color: string }[];
+  emaLines: { period: number; points: OverlayPoint[]; color: string }[];
+  bollinger: (BollingerResult & { color: string }) | null;
+  rsi: OscillatorPoint[] | null;
+  macd: MacdResult | null;
+}
+
+export type { IndicatorConfig };

package/src/components/chart/chart-viewport.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { RIGHT_EDGE_ANCHOR_RATIO, resolveAnchoredChartZoom } from "./chart-viewport";
+import { getVisiblePointCount, RIGHT_EDGE_ANCHOR_RATIO, resolveAnchoredChartZoom } from "./chart-viewport";
 
 describe("resolveAnchoredChartZoom", () => {
   test("keeps keyboard zoom pinned to the latest data when anchored to the right edge", () => {
@@ -22,4 +22,8 @@ describe("resolveAnchoredChartZoom", () => {
       panOffset: 63,
     });
   });
+
+  test("allows zooming down to a two-point viewport", () => {
+    expect(getVisiblePointCount(433, 1000)).toBe(2);
+  });
 });

package/src/components/chart/chart-viewport.ts

@@ -1,4 +1,4 @@
-const MIN_VISIBLE_POINTS = 10;
+const MIN_VISIBLE_POINTS = 2;
 export const RIGHT_EDGE_ANCHOR_RATIO = 1;
 
 function clamp(value: number, min: number, max: number): number {

package/src/components/chart/chart.test.ts

@@ -1,7 +1,13 @@
 import { describe, expect, test } from "bun:test";
-import { bucketOhlcSeries, getVisibleWindow, projectChartData, resolveRenderMode } from "./chart-data";
+import {
+  bucketOhlcSeries,
+  getVisibleWindow,
+  projectChartData,
+  resolveRenderMode,
+  resolveStableOhlcProjectionOptions,
+} from "./chart-data";
 import { stepCursorTowards } from "./cursor-motion";
-import { buildTimeAxis, formatAxisValue, renderChart, resolveChartPalette } from "./chart-renderer";
+import { buildChartScene, buildTimeAxis, formatAxisValue, formatCursorAxisValue, renderChart, resolveChartAxisWidth, resolveChartPalette } from "./chart-renderer";
 import type { PricePoint } from "../../types/financials";
 import type { ChartRenderMode, ChartViewState } from "./chart-types";
 
@@ -63,6 +69,111 @@ describe("bucketOhlcSeries", () => {
       volume: 450,
     });
   });
+
+  test("keeps interior OHLC buckets aligned to source bars while panning", () => {
+    const source = Array.from({ length: 13 }, (_, index) => ({
+      date: new Date(Date.UTC(2024, 0, index + 1)),
+      open: index,
+      high: index + 10,
+      low: index - 10,
+      close: index + 0.5,
+      volume: index + 1,
+    })) as PricePoint[];
+
+    const firstView = bucketOhlcSeries(source.slice(0, 12), 3, { sourceIndexOffset: 0 });
+    const pannedView = bucketOhlcSeries(source.slice(1, 13), 3, { sourceIndexOffset: 1 });
+    const firstSharedBucket = firstView[1];
+    const secondSharedBucket = firstView[2];
+    if (!firstSharedBucket || !secondSharedBucket) {
+      throw new Error("Expected shared OHLC buckets");
+    }
+
+    expect(firstSharedBucket).toEqual({
+      date: source[4]!.date,
+      open: 1,
+      high: 14,
+      low: -9,
+      close: 4.5,
+      volume: 2 + 3 + 4 + 5,
+    });
+    expect(pannedView[0]).toEqual(firstSharedBucket);
+    expect(pannedView[1]).toEqual(secondSharedBucket);
+  });
+
+  test("keeps source-aligned bucket count stable across small pans", () => {
+    const source: PricePoint[] = [];
+    let cursor = new Date(Date.UTC(2024, 0, 1));
+    let sourceIndex = 0;
+    while (source.length < 220) {
+      const day = cursor.getUTCDay();
+      if (day !== 0 && day !== 6) {
+        source.push({
+          date: new Date(cursor),
+          open: sourceIndex,
+          high: sourceIndex + 1,
+          low: sourceIndex - 1,
+          close: sourceIndex + 0.5,
+          volume: sourceIndex + 1,
+        });
+        sourceIndex += 1;
+      }
+      cursor = new Date(cursor.getTime() + 24 * 3600_000);
+    }
+
+    const visibleCount = 160;
+    const targetWidth = 40;
+    const projectionOptions = resolveStableOhlcProjectionOptions({
+      pointCount: visibleCount,
+      sourceIndexOffset: 0,
+      bucketWidth: targetWidth * 2,
+      navigationPointCount: visibleCount,
+    });
+    const targetBucketCount = projectionOptions.ohlcTargetBucketCount!;
+    const projectWindow = (start: number) => bucketOhlcSeries(
+      source.slice(start, start + visibleCount),
+      targetWidth,
+      {
+        ...projectionOptions,
+        sourceIndexOffset: start,
+      },
+    );
+
+    const first = projectWindow(0);
+    const pannedOne = projectWindow(1);
+    const pannedTwo = projectWindow(2);
+
+    expect(first).toHaveLength(targetBucketCount);
+    expect(pannedOne).toHaveLength(targetBucketCount);
+    expect(pannedTwo).toHaveLength(targetBucketCount);
+    expect(pannedOne[1]!).toEqual(first[1]!);
+    expect(pannedTwo[1]!).toEqual(first[1]!);
+  });
+
+  test("plans stable OHLC buckets from navigation count when histories are comparable", () => {
+    expect(resolveStableOhlcProjectionOptions({
+      pointCount: 158,
+      sourceIndexOffset: 12,
+      bucketWidth: 80,
+      navigationPointCount: 160,
+    })).toMatchObject({
+      ohlcBucketWidth: 80,
+      ohlcSourceBucketSize: 4,
+      ohlcTargetBucketCount: 40,
+      sourceIndexOffset: 12,
+    });
+  });
+
+  test("plans OHLC buckets from rendered points when navigation count is too different", () => {
+    expect(resolveStableOhlcProjectionOptions({
+      pointCount: 84,
+      sourceIndexOffset: 0,
+      bucketWidth: 80,
+      navigationPointCount: 160,
+    })).toMatchObject({
+      ohlcSourceBucketSize: 3,
+      ohlcTargetBucketCount: 28,
+    });
+  });
 });
 
 describe("resolveRenderMode", () => {
@@ -90,17 +201,38 @@ describe("resolveRenderMode", () => {
       volume: 1_000 + i,
     })) as PricePoint[];
 
-    expect(projectChartData(denseSeries, 80, "candles", false).points).toHaveLength(40);
-    expect(projectChartData(denseSeries, 80, "ohlc", false).points).toHaveLength(40);
+    expect(projectChartData(denseSeries, 80, "candles", false).points).toHaveLength(34);
+    expect(projectChartData(denseSeries, 80, "ohlc", false).points).toHaveLength(34);
     expect(projectChartData(denseSeries, 80, "line", false).points).toHaveLength(80);
   });
+
+  test("keeps candle buckets stable when axis width changes the plot by one column", () => {
+    const denseSeries = Array.from({ length: 121 }, (_, index) => ({
+      date: new Date(Date.UTC(2024, 0, index + 1)),
+      open: 100 + index,
+      high: 101 + index,
+      low: 99 + index,
+      close: 100.5 + index,
+      volume: 1_000 + index,
+    })) as PricePoint[];
+
+    const wide = projectChartData(denseSeries, 80, "candles", false, { ohlcBucketWidth: 80 }).points;
+    const narrowed = projectChartData(denseSeries, 78, "candles", false, { ohlcBucketWidth: 80 }).points;
+
+    expect(narrowed.map((point) => point.date.toISOString())).toEqual(wide.map((point) => point.date.toISOString()));
+    expect(narrowed.map((point) => point.open)).toEqual(wide.map((point) => point.open));
+    expect(narrowed.map((point) => point.close)).toEqual(wide.map((point) => point.close));
+  });
 });
 
 describe("getVisibleWindow", () => {
   test("shows the full selected range at default zoom and lets the renderer downsample it", () => {
     const history = buildDenseHistory(252);
     const viewState: ChartViewState = {
-      timeRange: "1Y",
+      presetRange: "1Y",
+      bufferRange: "1Y",
+      activePreset: "1Y",
+      resolution: "auto",
       panOffset: 0,
       zoomLevel: 1,
       cursorX: null,
@@ -110,14 +242,17 @@ describe("getVisibleWindow", () => {
     const window = getVisibleWindow(history, viewState, 80);
 
     expect(window.points).toHaveLength(history.length);
-    expect(window.points[0]?.date.toISOString()).toBe(history[0]?.date.toISOString());
-    expect(window.points.at(-1)?.date.toISOString()).toBe(history.at(-1)?.date.toISOString());
+    expect(window.points[0]?.date.toISOString()).toBe(history[0]!.date.toISOString());
+    expect(window.points.at(-1)?.date.toISOString()).toBe(history.at(-1)!.date.toISOString());
   });
 
   test("zooms into the selected range instead of pinning the default view to chart width", () => {
     const history = buildDenseHistory(252);
     const viewState: ChartViewState = {
-      timeRange: "1Y",
+      presetRange: "1Y",
+      bufferRange: "1Y",
+      activePreset: "1Y",
+      resolution: "auto",
       panOffset: 0,
       zoomLevel: 2,
       cursorX: null,
@@ -127,15 +262,118 @@ describe("getVisibleWindow", () => {
     const window = getVisibleWindow(history, viewState, 80);
 
     expect(window.points).toHaveLength(126);
-    expect(window.points[0]?.date.toISOString()).toBe(history[126]?.date.toISOString());
-    expect(window.points.at(-1)?.date.toISOString()).toBe(history.at(-1)?.date.toISOString());
+    expect(window.points[0]?.date.toISOString()).toBe(history[126]!.date.toISOString());
+    expect(window.points.at(-1)?.date.toISOString()).toBe(history.at(-1)!.date.toISOString());
   });
 });
 
 describe("renderChart", () => {
+  test("sizes the y-axis to the visible label width instead of a fixed gutter", () => {
+    expect(resolveChartAxisWidth(["$18", "$17", "$16", "$14"], 4, 10)).toBe(4);
+    expect(resolveChartAxisWidth(["$1.1678", "$1.1654"], 4, 10)).toBe(7);
+    expect(resolveChartAxisWidth(["+0.25%", "-0.10%"], 5, 11)).toBe(6);
+  });
+
   test("formats price axes with the instrument currency", () => {
     expect(formatAxisValue(21_970, "price", 0, "JPY")).toBe("¥22.0K");
     expect(formatAxisValue(12_340, "price", 0, "HKD")).toBe("HK$12.3K");
+    expect(formatAxisValue(1.17364, "price", 0, "USD", "CURRENCY")).toBe("$1.17364");
+  });
+
+  test("adapts FX axis precision to the visible price range", () => {
+    expect(formatAxisValue(1.167815, "price", 0, "USD", "CURRENCY", 0.12)).toBe("$1.17");
+    expect(formatAxisValue(1.167815, "price", 0, "USD", "CURRENCY", 0.0024)).toBe("$1.1678");
+  });
+
+  test("keeps the active price-axis label more precise than coarse grid ticks", () => {
+    expect(formatAxisValue(21.184, "price", 0, "USD", "STK", 11)).toBe("$21");
+    expect(formatCursorAxisValue(21.184, "price", 0, "USD", "STK", 11)).toBe("$21.18");
+    expect(formatCursorAxisValue(1.167815, "price", 0, "USD", "CURRENCY", 0.12)).toBe("$1.1678");
+  });
+
+  test("keeps zoomed equity axis labels distinct and decimal-aware", () => {
+    const narrowRangeFixture: PricePoint[] = [
+      { date: new Date("2024-01-02T09:30:00Z"), close: 18.02, volume: 100 },
+      { date: new Date("2024-01-02T09:31:00Z"), close: 17.91, volume: 120 },
+      { date: new Date("2024-01-02T09:32:00Z"), close: 17.84, volume: 140 },
+      { date: new Date("2024-01-02T09:33:00Z"), close: 17.73, volume: 160 },
+    ];
+
+    const result = renderChart(projectChartData(narrowRangeFixture, 32, "area", false).points, {
+      width: 32,
+      height: 8,
+      showVolume: false,
+      volumeHeight: 0,
+      cursorX: null,
+      cursorY: null,
+      mode: "area",
+      axisMode: "price",
+      currency: "USD",
+      assetCategory: "STK",
+      colors: palette,
+    });
+
+    expect(result.axisFractionDigits).toBeGreaterThanOrEqual(1);
+    expect(new Set(result.axisLabels.map((entry) => entry.label)).size).toBe(result.axisLabels.length);
+    expect(result.axisLabels.every((entry) => entry.label.includes("."))).toBe(true);
+  });
+
+  test("includes visible indicator overlays in the chart price range", () => {
+    const projection = projectChartData(chartFixture, 12, "line", false);
+    const scene = buildChartScene(projection.points, {
+      width: 12,
+      height: 6,
+      showVolume: false,
+      volumeHeight: 0,
+      cursorX: null,
+      cursorY: null,
+      mode: projection.effectiveMode,
+      colors: palette,
+      indicators: {
+        smaLines: [{
+          period: 2,
+          color: "#ff00ff",
+          points: [
+            { index: 0, value: 6 },
+            { index: 1, value: 18 },
+          ],
+        }],
+        emaLines: [],
+        bollinger: null,
+        rsi: null,
+        macd: null,
+      },
+    });
+
+    expect(scene?.min).toBe(6);
+    expect(scene?.max).toBe(18);
+  });
+
+  test("keeps one decimal on zoomed equity axes even when whole-dollar ticks are distinct", () => {
+    const mediumRangeFixture: PricePoint[] = [
+      { date: new Date("2024-01-02T09:30:00Z"), close: 233.82, volume: 100 },
+      { date: new Date("2024-01-02T09:45:00Z"), close: 232.14, volume: 120 },
+      { date: new Date("2024-01-02T10:00:00Z"), close: 230.21, volume: 140 },
+      { date: new Date("2024-01-02T10:15:00Z"), close: 231.67, volume: 160 },
+      { date: new Date("2024-01-02T10:30:00Z"), close: 228.94, volume: 180 },
+    ];
+
+    const result = renderChart(projectChartData(mediumRangeFixture, 28, "area", false).points, {
+      width: 28,
+      height: 8,
+      showVolume: false,
+      volumeHeight: 0,
+      cursorX: null,
+      cursorY: null,
+      mode: "area",
+      axisMode: "price",
+      currency: "USD",
+      assetCategory: "STK",
+      colors: palette,
+    });
+
+    expect(result.axisFractionDigits).toBe(1);
+    expect(result.axisLabels.every((entry) => entry.label.includes("."))).toBe(true);
   });
 
   test("eases coarse cursor motion quickly and settles without overshooting", () => {
@@ -409,6 +647,7 @@ describe("renderChart", () => {
       showVolume: false,
       volumeHeight: 0,
       cursorX: null,
+      cursorY: null,
       mode: projection.effectiveMode,
       axisMode: "percent",
       colors: palette,

package/src/components/chart/comparison-chart-renderer.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, test } from "bun:test";
 import { projectComparisonChartData } from "./comparison-chart-data";
-import { buildComparisonChartScene, renderComparisonChart } from "./comparison-chart-renderer";
+import {
+  buildComparisonChartScene,
+  formatComparisonAxisValue,
+  formatComparisonCursorAxisValue,
+  renderComparisonChart,
+} from "./comparison-chart-renderer";
 import type { ComparisonChartSeries } from "./chart-types";
 
 function makeSeries(symbol: string, color: string, closes: number[]): ComparisonChartSeries {
@@ -21,6 +26,71 @@ function textLines(result: ReturnType<typeof renderComparisonChart>): string[] {
 }
 
 describe("renderComparisonChart", () => {
+  test("adapts price-axis precision to the visible range", () => {
+    expect(formatComparisonAxisValue(1.167815, "price", 0.12)).toBe("1.17");
+    expect(formatComparisonAxisValue(1.167815, "price", 0.0024)).toBe("1.1678");
+  });
+
+  test("keeps the active comparison-axis label more precise than coarse ticks", () => {
+    expect(formatComparisonAxisValue(21.184, "price", 11)).toBe("21");
+    expect(formatComparisonCursorAxisValue(21.184, "price", 11)).toBe("21.18");
+  });
+
+  test("keeps narrow comparison price axes distinct", () => {
+    const projection = projectComparisonChartData([
+      makeSeries("AAPL", "#00ff00", [18.02, 17.91, 17.84, 17.73]),
+    ], 24, {
+      timeRange: "ALL",
+      panOffset: 0,
+      zoomLevel: 1,
+      renderMode: "line",
+    }, "price");
+
+    const result = renderComparisonChart(projection, {
+      width: 24,
+      height: 6,
+      cursorX: null,
+      cursorY: null,
+      selectedSymbol: "AAPL",
+      colors: {
+        bgColor: "#000000",
+        gridColor: "#333333",
+        crosshairColor: "#ffffff",
+      },
+    });
+
+    expect(result.axisFractionDigits).toBeGreaterThanOrEqual(1);
+    expect(new Set(result.axisLabels.map((entry) => entry.label)).size).toBe(result.axisLabels.length);
+    expect(result.axisLabels.every((entry) => entry.label.includes("."))).toBe(true);
+  });
+
+  test("keeps one decimal on zoomed comparison price axes even when whole ticks are distinct", () => {
+    const projection = projectComparisonChartData([
+      makeSeries("AAPL", "#00ff00", [233.82, 232.14, 230.21, 231.67, 228.94]),
+    ], 24, {
+      timeRange: "ALL",
+      panOffset: 0,
+      zoomLevel: 1,
+      renderMode: "line",
+    }, "price");
+
+    const result = renderComparisonChart(projection, {
+      width: 24,
+      height: 6,
+      cursorX: null,
+      cursorY: null,
+      selectedSymbol: "AAPL",
+      colors: {
+        bgColor: "#000000",
+        gridColor: "#333333",
+        crosshairColor: "#ffffff",
+      },
+    });
+
+    expect(result.axisFractionDigits).toBe(1);
+    expect(result.axisLabels.every((entry) => entry.label.includes("."))).toBe(true);
+  });
+
   test("renders a shared multi-series line chart", () => {
     const projection = projectComparisonChartData([
       makeSeries("AAPL", "#00ff00", [10, 12, 11, 13]),

package/src/components/chart/comparison-chart-renderer.ts

@@ -12,6 +12,7 @@ import {
   drawGridLines,
   drawLine,
   formatPrice,
+  resolveAxisFractionDigits,
   type StyledContent,
 } from "./chart-renderer";
 import type { ChartAxisMode, ComparisonChartRenderMode } from "./chart-types";
@@ -71,6 +72,8 @@ export interface RenderComparisonChartResult {
   crosshairValue: number | null;
   cursorColumn: number | null;
   cursorRow: number | null;
+  axisFractionDigits: number | null;
+  priceRange: number | null;
 }
 
 function clamp(value: number, min: number, max: number): number {
@@ -95,10 +98,32 @@ function formatPercentAxisValue(value: number): string {
   return `${prefix}${value.toFixed(decimals)}%`;
 }
 
-export function formatComparisonAxisValue(value: number, axisMode: ChartAxisMode): string {
+function getComparisonAxisFractionDigitFloor(priceRange: number | undefined): number {
+  if (priceRange === undefined || !Number.isFinite(priceRange) || priceRange <= 0) return 0;
+  const visibleStep = priceRange / 3;
+  if (!Number.isFinite(visibleStep) || visibleStep <= 0) return 0;
+  return Math.max(0, Math.ceil(-Math.log10(visibleStep)) + 1);
+}
+
+export function formatComparisonAxisValue(
+  value: number,
+  axisMode: ChartAxisMode,
+  priceRange?: number,
+  fixedFractionDigits?: number,
+): string {
+  return axisMode === "percent"
+    ? formatPercentAxisValue(value)
+    : formatPrice(value, undefined, priceRange, 0, 0, fixedFractionDigits);
+}
+
+export function formatComparisonCursorAxisValue(
+  value: number,
+  axisMode: ChartAxisMode,
+  priceRange?: number,
+): string {
   return axisMode === "percent"
     ? formatPercentAxisValue(value)
-    : formatPrice(value);
+    : formatPrice(value, undefined, priceRange, 2, Math.abs(value) >= 1 ? 2 : 4);
 }
 
 function fillColumn(
@@ -305,13 +330,23 @@ export function renderComparisonChart(
       crosshairValue: null,
       cursorColumn: null,
       cursorRow: null,
+      axisFractionDigits: null,
+      priceRange: null,
     };
   }
 
   const dotWidth = scene.width * 2;
   const chartDotBottom = scene.chartRows * 4 - 1;
+  const priceRange = scene.max - scene.min;
   const buf = createPixelBuffer(dotWidth, scene.height * 4);
   const gridLines = computeGridLines(scene.min, scene.max, 0, chartDotBottom, 3);
+  const axisFractionDigits = scene.axisMode === "price"
+    ? resolveAxisFractionDigits(
+      gridLines.map((line) => line.price),
+      (price, fixedFractionDigits) => formatComparisonAxisValue(price, scene.axisMode, priceRange, fixedFractionDigits),
+      getComparisonAxisFractionDigitFloor(priceRange),
+    )
+    : null;
   drawGridLines(buf, gridLines.map((line) => line.y), scene.colors.gridColor);
 
   const selectedSeries = getSelectedSeries(scene.series, scene.selectedSymbol);
@@ -336,7 +371,7 @@ export function renderComparisonChart(
   for (const line of gridLines) {
     axisLabelsByRow.set(
       Math.min(Math.floor(line.y / 4), Math.max(scene.chartRows - 1, 0)),
-      formatComparisonAxisValue(line.price, scene.axisMode),
+      formatComparisonAxisValue(line.price, scene.axisMode, priceRange, axisFractionDigits ?? undefined),
     );
   }
 
@@ -350,5 +385,7 @@ export function renderComparisonChart(
     crosshairValue: scene.crosshairValue,
     cursorColumn: scene.cursorColumn,
     cursorRow: scene.cursorRow,
+    axisFractionDigits,
+    priceRange,
   };
 }